-
Você já praticou aquele exercício
clássico de animação Boucing Ball?
-
Se já, ótimo.
-
Agora nós vamos aprender
ele em código
-
utilizando os famosos
quick frames aqui no CSS.
-
Vamos para o VS Cold
que eu vou te mostrar.
-
Já estou com as minhas páginas
prontas aqui de HTML e CSS.
-
No html eu intitulei
-
Ball Symbol,
que é o nome do nosso exercício
-
e linkei a nossa página está
O que é, onde a gente vai estilizar
-
e criar a animação da nossa bola,
da nossa bolinha quicando aqui
-
nesta página especificamente pra
você está linkado.
-
Se não reconhece, é aqui
dentro do corpo do nosso corpo.
-
Aqui na interface
eu criei uma área de trabalho
-
que eu chamei de My Canvas
e dentro do My Canvas
-
eu coloquei duas
dives, que é uma de container
-
onde a bolinha vai ficar dentro
-
e o shadow
que a sombra da minha bola
-
que vai ficar no contêiner
e dentro do container
-
temos uma div com a classe ball
que é a nossa bolinha. Ok?
-
Ficando claro,
vamos para o mais importante
-
que é o CSS, aonde a gente vai fazer
a coisa acontecer.
-
Mas antes disso eu aqui no meu corpo
-
da interface do meu HTML,
-
eu vou colocar um pedacinho de zero.
-
E vou colocar uma margem de zero
também,
-
que eu quero dizer
a todos os meus parâmetros do body.
-
E aí vamos chamar a nossa classe
May e Canvas.
-
Legal, Vou abrir chaves, colchetes,
-
então vou dar um background
para ele, um background de colo
-
e para a gente visualizar onde
que está a nossa área de trabalho.
-
E neste background eu vou colocar de
-
como colocar esse azul aqui
-
e se pronto colocamos o nosso
-
My Canvas.
-
Eu vou estar certa nomenclatura
-
May Canvas
-
May Canvas Ok, Perfeito.
-
E aí a gente vai ter que
definir a altura para saber
-
para aparecer a altura e largura.
-
Então vamos jogar os dois
e 500 pixels
-
aqui.
-
Width 500.
-
Opa 15 20 Não 500 pixels
e vou dar um contra o S.
-
Eis aqui a minha,
-
o meu, minha área
e meu espaço de trabalho
-
que eu denominei May Canvas
e vou colocar um position absolute.
-
Para ele ficar absoluto
dentro da nossa,
-
dentro do nosso may Canvas
-
e um margin auto
-
que quero que seja automático
-
e vou zerar alguns parâmetros
-
Left zero.
-
Light e zero. Top.
-
Top o zero também.
-
Opa um foi top!
-
Zero.
-
E o botão que é o nossa base?
-
Zerei essa parte do nosso Canvas,
tá legal.
-
E agora vamos,
-
Vamos estilizar a nossa bolinha.
-
Está faltando Já tem a classe
dentro da dive lá container
-
como bau,
Então eu vou chamar minha classe,
-
vou abrir chaves
-
e vou colocar show,
ver qual que vai ser a curva,
-
background color,
alguma coisa que seja bem
-
pouca e Brown
-
uma vai ser um conversa,
será que vai ficar um
-
contraste legal?
-
Vamos ver
quando a gente colocar o Ray
-
em 50 pixels,
-
vou dar um control s.
-
Ele já começa a formar
-
o edit
-
em 50 pixels.
-
Contra o S
e já forma mais um pouquinho.
-
E para arredondar os cantos
eu vou jogar um border, porém
-
com um 50%
-
já foi mão nossa bolinha e
-
adoro quando forma nessa bolinha,
já que o nosso canvas é um position
-
absolute, vamos colocar aqui
um position relativo
-
relative
-
e top 100 pra gente
-
definir onde é o ponto de partida
na nossa bolinha.
-
Vamos jogar
-
Top 100 pixel
-
em relação ao nosso canvas,
então a Control S
-
ele já vem de céu e 100 pixels
no nosso topo
-
e left.
-
Para jogar ele para o centro
vamos jogar um left de 220
-
pixel.
-
Jogamos para o centro
-
e aí a gente
entra na nossa animation.
-
A gente escolhe uma propriedade
-
chamada de bom Se
-
lembra do bom símbolo?
-
É basicamente a nossa bolinha
quicando.
-
Vamos acrescentar
-
0,9 segundos de duração
-
e queremos que ela seja infinita.
-
Legal, perfeito.
-
Nada acontece porque a gente
não criou ainda nossas que frames?
-
E para chamar os nossos keyframes
nós temos que clicar neste arroba
-
lindão aqui e digitar keep frames.
-
Perfeito!
-
Aponta que nossa animação
é um bounce que é bom sim,
-
é esse mesmo nomezinho aqui
-
e vamos abrir chaves novamente.
-
E aí?
-
Aqui nós vamos colocar os nossos
keyframes.
-
Então em 10%.
-
E abrindo chaves
eu posso aqui colocar
-
10%, 50%,
um que é como se fosse um keyframe
-
em 10% de frames, 50
um frame em 100%.
-
E aí eu posso variar, eu posso ficar
1%, cinco, dez.
-
Fica ao meu critério.
-
Neste caso eu vou usar 10%
e vou colocar Ray.
-
Então em que frame dez de 10%
ele vai ter?
-
50 pixels de corrente e de widgets
a mesma coisa.
-
Então vai ser uma circunferência,
uma elipse perfeita.
-
Só que ela vai e conforme
ela vai descendo com um impacto,
-
com aquela velocidade,
ela vai deformando.
-
Então eu quero deformar conforme
ela avança na minha timeline.
-
E então, quando eu chegar
em 30% da minha timeline,
-
eu tenho um novo
que frame que eu vou colocar?
-
Vou até copiar aqui.
-
Esse daqui como?
-
Eu vou deformar ela
-
em 40.
-
Que frames já vem?
-
Nós Já começou a deformar aqui.
-
Ela deforma para o lado e aí
eu vou chegar
-
em 50% do meu que frame
-
da minha linha do tempo onde eu vou
estabelecesse que frame
-
que a bolinha vai ser
Quando chegar em 50%
-
a bolinha vai bater lá embaixo
e vai voltar,
-
Então vamos fazer
-
ela bater lá embaixo.
Mas nesse processo
-
a gente não pode esquecer
que ela se deforma.
-
Então vou colocar aqui rente.
-
E eu disse
Eu vou mudar aqui para 57.
-
E aqui eu vou colocar 30, 30%
-
quando ela bate no chão, mas
para apontar que ela bate no chão.
-
Aí eu coloco o nosso famoso
transform e aplico e aplico
-
perdão,
um translate vertical, ou seja, Y
-
de 240 pixels.
-
Vamos ver, vamos lá.
-
Começou a bater e voltou,
mas eu tenho que apontar para criar
-
fluidez,
-
apontar novos que frames?
-
E aqui eu vou em 75%
-
eu vou abrir a timeline,
eu vou habilitar mais um que frame
-
e vou criar mais uma deformação
para ela na volta,
-
que é de 57 pixels e quando chegar
no fim é a volta total dela.
-
Então 100% da linha do tempo
-
para criar o Lupita.
-
Um raide Eu vou?
-
Não, eu não preciso mais o raide,
porque aí ela volta não 100%.
-
Ela volta ao seu estado normal.
-
Então eu vou colocar um transform.
-
Transform Trans frames.
-
Cada um está aqui,
então vou mais rápido.
-
Translate e y na vertical
-
e ela volta para o seu ponto inicial
em zero pixels.
-
Então o que acontece
-
é mais ou menos isso o boss Symbol
já criando o estilo ping infinito
-
infinito.
-
Aqui onde
-
de bola quicando e conforme
ela bate e ela sobe ou ela desce,
-
ela vai se deformando para buscar
a interpolação mais real possível.
-
Então, esse foi um exercício
clássico de animação chamado Balfe
-
bom que a gente fez
utilizando o CSS aqui no Visual CUT
-
e utilizando também os frames
para apontar na nossa timeline.
-
Em que momento
em que a gente quer deformar ou não
-
o nosso objeto visual,
que no caso aqui é uma bolinha.
-
Então, para melhorar
e qualificação animação em código,
-
pratique muito,
Pegue novas animações
-
ou novos objetos para poder deformar
para poder criar interpolação,
-
porque só praticando
você vai evoluir a sua animação.
