Animando estilos com RAF (versão vídeo)

Estamos de volta com contador do Oh noes.

Se quisermos fazer o Oh Noes ficar maior
conforme o contador se aproxima de zero.

Para deixar mais dramático.

Uma maneira de fazer isso é
animar o CSS dessa imagem.

com a propriedade window.setInterval

O primeiro passo é pegar a
imagem e armazenar em uma variável.

var ohnoes =
document.getelementById("ohnoes");

Vou configurar o tamanho inicial
ohnoes.style.width = "50px";

Assim temos um tamanho inicial para
começar aumentar a imagem.

E agora vou criar a função makeItBigger.

Que será responsável por
aumentar a imagem.

Dentro da função precisamos mudar
a propriedade width (largura) da imagem.

Adicionando um ao
tamanho anterior da imagem.

Por fim vou executar a função
window.SetInterval

window.setInterval(makeItBigger)

Com que frequência você quer aumentar?

Queremos uma animação suave

O que significa que queremos algo
entre 24 quadros por segundo

e 60 quadros por segundo.

Vou experimentar 30 quadros por segundo.

Que é 1000 dividido por 30.

Bem, não está funcionando.

Você sabe o porque?
É um pouco complicado.

Vamos dar uma olhada nesse
trecho de código.

Qual é o valor de ohnoes.style.width?

Após essa linha ser executada?

Você pode achar que foi
de 50 para 51 pixels,

mas vamos imprimir o resultado
pra ver qual é o valor.

Vou incluir o log na div com
o seguinte comando

infoDiv.textContent = ohnoes.style.width;

E então vamos adicionar 1 a 50 pixels.

Quanto é 50 pixels + 1?

Você deve pensar que é 51 pixels,

mas JavaScript interpreta os
50 pixels como uma string.

Então na verdade acaba virando "50px1".

O que não faz sentido nenhum.

Logo o navegador está
simplesmente ignorando nossa tentativa

de mudar o valor da propriedade width
para algo sem o menor sentido.

Então precisamos converter essa
unidade em um número,

e então adicionar 1 e só depois
adicionar o "px" novamente.

Podemos fazer a conversão para
número com a função ParseFlow

coloca-lá entre chaves e concatenar
o "px" no final.

E está funcionando, está ficando maior.

Certo.

Você viu a dificuldade de animar
propriedades do CSS.

Geralmente as propriedades
tem as unidades anexadas,

então você vai ter que converter
para número

Meu Deus está ficando maior !

converter para um tipo numérico.

e concatenar o identificador
da unidade novamente

Ok, está ficando bem assustador !

Na verdade há nada de complicado
no uso do SetInterval

para animar propriedades.

Primeiro, o navegador não
garante que o intervalo será obedecido.

Outras coisas podem surgir como
interação com o usuário.

Como o usuário digitar algo.

E isso pode fazer com que sua
função seja executada mais tarde.

Assim você não terá essa animação suave.

Segundo, o navegador irá executar essa
função mesmo que a tabela esteja escondida

fazendo uso de processamento
desnecessariamente.

Por isso eu uso uma nova função disponível
em navegadores modernos

desenvolvidos espacialmente com
animações DOM em mente.

É chamada de
windows.RequestAnimationFrame (RFA)

Para usa-lá vamos nos livrar
dessa linha com SetInterval

e vamos executar a RFA

de dentro da função

e referenciar a função makeItBigger.

E então vamos chamar makeItBigger
na função PageLoad

Nossa, está ficando mair
e mais rápido dessa vez.

Agora o navegador chama a função
MakeItBigger logo após imprimir a imagem

Que é cerca de 60 quadros por segundo,

o dobro do que tínhamos antes.

e adicionamos 1 pixel a largura cada vez

e refaz o cálculo em 60
quadros por segundo

Em apenas alguns segundos
ficar maior que a página.

Agora ele se foi.

Como desaceleremos nossa animação?

Há algumas maneiras, mas um modo que eu
gosto é rastrear quanto tempo já passou.

E então calcular qual deveria ser
o novo tamanho baseado nisso.

Começamos guardando o hora que
a animação inicia milisegundos ,

antes da função ser executada.

var startTime = new Date().getTime();

E dentro da função MakeItBigger
armazenamos o hora atual.

var currTime = new Date().getTime();

E no cálculo faremos com que
cresça 30 pixels por segundo.

E o tamanho inicial da imagem 50 px.

Então vamos calcular isso aqui.

Então o valor inicial da variável
newWidth será 50

mais currTime menos startTime em
milissegundos, dividido por 1000

isso tudo vezes 30, porque vamos
aumentar 30 pixels por segundo

Ok, esse é nossa nova largura.

Agora vamos associar o style.width
a essa nova largura.

Aí está, a animação suave em
30 quadros por segundo.

E podemos mudar esse número se quisermos
que cresça mais devagar

ou mais rápido.

Que tal suavizar a animação quando
ela ficar muito grande?

Podemos simplesmente
colocar um if nessa linha

e para que seja executado somente
se a variável currentWidth

for menor que um número, como 300

vamos tentar isso.

Na verdade currentWidth é

Não, newWidth desculpe.

Vamos ver se chega a 300.

Vai Oh noes, você consegue, você consegue.

Perfeito!

Essa técnica de usar a propriedade RFA

deve funcionar para usuários
do Chrome, Firefox ou IE 10 ou superior

Há várias bibliotecas JavaScript e shims

que irão usar RAF
quando estiver disponível

e usar setInterval em navegadores antigos.

Essa é a questão do desenvolvimento web.

A rede está está mudando o tempo todo,

navegadores estão incluindo
novas características

desenvolvedores estão descobrindo novas
maneira de usar essas características.

Você tem que estar aprendendo
constantemente o que há de novo,

e o que é melhor para
o que você quer fazer.

Legendado por [Valter Bigeli]
Revisado por [Fernando dos Reis]