Mais dinamismo

Na parte 1 aprendemos a configurar nossas animações, hoje iremos focar nas animações de fato, em cada movimento e conbinações de movimentos. Vamos nessa <3

Trabalhando com keyframes e linha do tempo

Quando falamos em animações temos que pensar em uma linha do tempo, com vários frames (quadros), cada frame é como um pontinho ao longo da linha, e cada keyframes (quadro chave) é um pontinho especial onde você india a posição ou forma de um elemento onde ele ira se "animar" percorrendo a linha até chegar no estado ou forma desejada na marcação do keyframe.

Para ficar mais claro vamos a um exemplo:

Ok, temos aqui uma animação que dura 2s, se move de forma linear e se repete infinitamente. Em nossa linha do tempo temos dois keyfranes declarados, um no inicio(0%) e outro no fim(100%), até ai não tem nada de novo, mas e se adicionarmos mais keyframes?

Nesse exemplo temos uma linha do tempo com quatro keyframes declarados, cada um em ponto diferente, o que faz nosso elemento se movimentar pelo eixo X (translateX) por cada um deles até o fim da animação.

Animando multiplas propriedades

Aqui começa a ficar um pouco complicado, na verdade não é nada difícil de fazer, o complicado é entender o que está sendo sendo feito, vamos ver um exemplo do que estou falando:

Bizarro! Não da para entender direito, e olha que ta simples rsrsrs, vamos vizualizar de outra forma para ficar mais fácil.

Adimito que me empolguei um pouco na ilustração acima rsrsrs, mas vamos continuar.

Vamos analisar a animação:

  @keyframes crazy {
  0%   {transform: translateX(0)}
  25%  {transform: translatey(200px)}
  50%  {transform: translateX(100px)}
  75%  {transform: translateY(200px)}
  100% {transform: translateX(0)}
}

Entenderam com clareza tudo o que está rolando? Nem eu, tem muita coisa implícita, em vários momentos nossa bola se move para um ponto no plano cartesiano que não está claro.

Vamos reescrever a mesma animação com mais detalhes:

  @keyframes crazy {
  0%   {
    transform: 
      translateX(0) 
      translatey(0)
  }

  25%  {
    transform:
      translateX(0)
      translatey(200px)
  }

  50%  {
    transform:
      translateX(100px)
      translatey(0px)
  }

  75%  {
    transform: 
      translateX(0)
      translateY(200px)
  }

  100% {
    transform: 
      translateX(0)
      translateY(0)
  }

}

Ok, agora podemos ver melhor. Quando não especificamos uma posição no plano cartesiano ela é dada como 0, isso explica um pouco o porque a bola anda na diagonal, na verdade mesmo não deixando explícito, as vezes ela se move tanto no eixo X quanto no Y, isso porque como os pontos não declarados são dados como 0, ela volta a posição original, isso somado a o outro movimento declarado faz com que a bola se mova nos dois eixos ao mesmo tempo, ou seja, se move na diagonal.

Vamos melhorar ainda mais, reescrevendo usando apenas o translate como aprendemos no artigo sobre transformações

  @keyframes crazy {
  0%   {transform: translate(0,0)}
  25%  {transform: translate(0,200px)}
  50%  {transform: translate(100px,0)}
  75%  {transform: translate(0,200px)}
  100% {transform: translate(0,0)}
}

Show. Agora sim, podemos ver claramente em quais pontos do plano cartesiano nossa bola vai estar em cada estágio da animação, se você seguir com calma a bola, pensando onde ela deve estar em cada tempo, vai entender bem o que está acontecendo e nunca mais vai ficar perdido.

Podemos usar cores para ver claramente quando o elemento passa por cada keyframe.

Conclusão

O artigo de hoje na verdade não foi sobre as animações de fato, foi focado no planejamento e calma na hora de criar uma animação.

É muito fácil perder a noção do que está acontecendo, então a mensagem de hoje é: Rabisque, planeje e faça tudo passo a passo sem deixar duvidas pelo caminho.

Até amanhã.

<-- #7 - Pseudo-elementos | Lista completa | #9 - Flexbox básico -->


1,192 2 4