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]