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]