0:00:00.930,0:00:03.213
Estamos de volta com contador do <i>Oh noe</i>s.

0:00:03.643,0:00:09.106
Se quisermos fazer o <i>Oh Noes</i> ficar maior[br]conforme o contador se aproxima de zero.

0:00:09.461,0:00:11.771
Para deixar mais dramático.

0:00:12.690,0:00:16.850
Uma maneira de fazer isso é [br]animar o CSS dessa imagem.

0:00:17.319,0:00:19.139
com a propriedade <i>window.setInterval</i>

0:00:20.271,0:00:24.541
O primeiro passo é pegar a [br]imagem e armazenar em uma variável.

0:00:24.801,0:00:30.391
<i>var ohnoes =[br] document.getelementById("ohnoes");</i>

0:00:31.981,0:00:36.341
Vou configurar o tamanho inicial [br]<i>ohnoes.style.width = "50px";</i>

0:00:36.458,0:00:39.418
Assim temos um tamanho inicial para [br]começar aumentar a imagem.

0:00:39.508,0:00:43.885
E agora vou criar a função <i>makeItBigger</i>.

0:00:44.483,0:00:47.643
Que será responsável por [br]aumentar a imagem.

0:00:48.194,0:00:52.784
Dentro da função precisamos mudar [br]a propriedade width (largura) da imagem.

0:00:52.949,0:00:58.011
Adicionando um ao [br]tamanho anterior da imagem.

0:01:00.071,0:01:04.191
Por fim vou executar a função [br]<i>window.SetInterval</i>

0:01:04.191,0:01:06.911
<i>window.setInterval(makeItBigger)</i>

0:01:06.911,0:01:11.470
Com que frequência você quer aumentar?

0:01:11.470,0:01:13.780
Queremos uma animação suave

0:01:13.789,0:01:16.750
O que significa que queremos algo [br]entre 24 quadros por segundo

0:01:16.750,0:01:18.220
e 60 quadros por segundo.

0:01:19.010,0:01:21.180
Vou experimentar 30 quadros por segundo.

0:01:21.296,0:01:24.166
Que é 1000 dividido por 30.

0:01:24.925,0:01:27.955
Bem, não está funcionando.

0:01:28.588,0:01:30.728
Você sabe o porque? [br]É um pouco complicado.

0:01:30.848,0:01:33.809
Vamos dar uma olhada nesse[br]trecho de código.

0:01:34.195,0:01:39.105
Qual é o valor de <i>ohnoes.style.width</i>?

0:01:39.108,0:01:40.998
Após essa linha ser executada?

0:01:41.485,0:01:45.757
Você pode achar que foi [br]de 50 para 51 pixels,

0:01:45.757,0:01:50.156
mas vamos imprimir o resultado [br]pra ver qual é o valor.

0:01:50.156,0:01:52.445
Vou incluir o <i>log</i> na <i>div</i> com [br]o seguinte comando

0:01:52.445,0:01:56.245
<i>infoDiv.textContent = ohnoes.style.width;</i>

0:01:58.543,0:02:04.813
E então vamos adicionar 1 a 50 pixels.

0:02:05.429,0:02:07.700
Quanto é 50 pixels + 1?

0:02:07.700,0:02:09.828
Você deve pensar que é 51 pixels,

0:02:09.828,0:02:14.848
mas JavaScript interpreta os [br]50 pixels como uma <i>string</i>.

0:02:15.787,0:02:20.037
Então na verdade acaba virando "50px1".

0:02:20.058,0:02:21.978
O que não faz sentido nenhum.

0:02:22.551,0:02:25.790
Logo o navegador está [br]simplesmente ignorando nossa tentativa

0:02:25.790,0:02:29.040
de mudar o valor da propriedade width [br]para algo sem o menor sentido.

0:02:29.702,0:02:35.492
Então precisamos converter essa [br]unidade em um número,

0:02:35.648,0:02:39.968
e então adicionar 1 e só depois [br]adicionar o "px" novamente.

0:02:40.678,0:02:45.360
Podemos fazer a conversão para [br]número com a função <i>ParseFlow</i>

0:02:45.360,0:02:53.100
coloca-lá entre chaves e concatenar [br]o "px" no final.

0:02:53.237,0:02:55.977
E está funcionando, está ficando maior.

0:02:56.232,0:02:57.629
Certo.

0:02:58.229,0:03:01.321
Você viu a dificuldade de animar[br]propriedades do CSS.

0:03:01.321,0:03:03.792
Geralmente as propriedades [br]tem as unidades anexadas,

0:03:03.792,0:03:05.892
então você vai ter que converter[br]para número

0:03:05.932,0:03:07.385
Meu Deus está ficando maior !

0:03:07.385,0:03:08.915
converter para um tipo numérico.

0:03:08.915,0:03:11.265
e concatenar o identificador [br]da unidade novamente

0:03:11.265,0:03:14.426
Ok, está ficando bem assustador !

0:03:14.477,0:03:18.947
Na verdade há nada de complicado [br]no uso do <i>SetInterval</i>

0:03:18.947,0:03:20.925
para animar propriedades.

0:03:21.337,0:03:27.447
Primeiro, o navegador não [br]garante que o intervalo será obedecido.

0:03:28.647,0:03:31.807
Outras coisas podem surgir como [br]interação com o usuário.

0:03:31.814,0:03:33.164
Como o usuário digitar algo.

0:03:33.164,0:03:36.168
E isso pode fazer com que sua [br]função seja executada mais tarde.

0:03:36.168,0:03:38.297
Assim você não terá essa animação suave.

0:03:38.999,0:03:43.125
Segundo, o navegador irá executar essa[br]função mesmo que a tabela esteja escondida

0:03:43.475,0:03:47.035
fazendo uso de processamento[br]desnecessariamente.

0:03:48.184,0:03:51.764
Por isso eu uso uma nova função disponível[br]em navegadores modernos

0:03:51.804,0:03:55.084
desenvolvidos espacialmente com [br]animações DOM em mente.

0:03:55.550,0:03:58.570
É chamada de [br]<i>windows.RequestAnimationFrame (RFA)</i>

0:03:58.860,0:04:02.782
Para usa-lá vamos nos livrar [br]dessa linha com <i>SetInterval</i>

0:04:03.452,0:04:08.102
e vamos executar a RFA

0:04:08.762,0:04:11.460
de dentro da função [br]

0:04:11.750,0:04:17.420
e referenciar a função <i>makeItBigger</i>.

0:04:18.570,0:04:24.190
E então vamos chamar <i>makeItBigger</i>[br]na função <i>PageLoad</i>

0:04:27.230,0:04:30.480
Nossa, está ficando mair [br]e mais rápido dessa vez.

0:04:30.890,0:04:35.631
Agora o navegador chama a função[br]<i>MakeItBigger</i> logo após imprimir a imagem

0:04:35.631,0:04:37.744
Que é cerca de 60 quadros por segundo,

0:04:37.744,0:04:39.454
o dobro do que tínhamos antes.

0:04:40.021,0:04:43.021
e adicionamos 1 pixel a largura cada vez

0:04:43.114,0:04:47.354
e refaz o cálculo em 60 [br]quadros por segundo

0:04:47.863,0:04:50.723
Em apenas alguns segundos [br]ficar maior que a página.

0:04:51.053,0:04:52.713
Agora ele se foi.

0:04:53.131,0:04:55.301
Como desaceleremos nossa animação?

0:04:56.103,0:05:01.092
Há algumas maneiras, mas um modo que eu [br]gosto é rastrear quanto tempo já passou.

0:05:01.092,0:05:04.332
E então calcular qual deveria ser [br]o novo tamanho baseado nisso.

0:05:04.561,0:05:09.091
Começamos guardando o hora que [br]a animação inicia milisegundos ,

0:05:09.123,0:05:10.833
antes da função ser executada.

0:05:11.187,0:05:16.657
<i>var startTime = new Date().getTime();</i>

0:05:17.151,0:05:20.481
E dentro da função <i>MakeItBigger </i>[br]armazenamos o hora atual.

0:05:20.854,0:05:25.784
<i>var currTime = new Date().getTime();</i>

0:05:26.716,0:05:31.636
E no cálculo faremos com que [br]cresça 30 pixels por segundo.

0:05:31.636,0:05:33.982
E o tamanho inicial da imagem 50 px.

0:05:34.050,0:05:37.270
Então vamos calcular isso aqui.

0:05:37.476,0:05:43.486
Então o valor inicial da variável [br]<i>newWidth</i> será 50

0:05:44.355,0:05:52.477
mais <i>currTime</i> menos <i>startTime</i> em [br]milissegundos, dividido por 1000

0:05:53.207,0:06:00.166
isso tudo vezes 30, porque vamos [br]aumentar 30 pixels por segundo

0:06:00.166,0:06:02.206
Ok, esse é nossa nova largura.

0:06:02.501,0:06:09.631
Agora vamos associar o <i>style.width</i>[br]a essa nova largura.

0:06:12.234,0:06:18.774
Aí está, a animação suave em [br]30 quadros por segundo.

0:06:19.506,0:06:24.666
E podemos mudar esse número se quisermos [br]que cresça mais devagar

0:06:25.204,0:06:27.694
ou mais rápido.

0:06:30.520,0:06:34.120
Que tal suavizar a animação quando [br]ela ficar muito grande?

0:06:34.150,0:06:37.700
Podemos simplesmente [br]colocar um <i>if</i> nessa linha

0:06:37.985,0:06:42.548
e para que seja executado somente [br]se a variável <i>currentWidth</i>

0:06:42.548,0:06:48.442
for menor que um número, como 300

0:06:48.442,0:06:49.612
vamos tentar isso.

0:06:54.331,0:06:56.251
Na verdade <i>currentWidth</i> é

0:06:56.470,0:06:58.560
Não, <i>newWidth</i> desculpe.

0:06:58.746,0:07:01.516
Vamos ver se chega a 300.

0:07:03.681,0:07:07.201
Vai Oh noes, você consegue, você consegue.

0:07:07.494,0:07:08.464
Perfeito!

0:07:09.078,0:07:12.348
Essa técnica de usar a propriedade RFA

0:07:12.685,0:07:17.515
deve funcionar para usuários [br]do Chrome, Firefox ou IE 10 ou superior

0:07:18.278,0:07:21.538
Há várias bibliotecas JavaScript e shims

0:07:21.759,0:07:25.259
que irão usar RAF[br]quando estiver disponível

0:07:25.472,0:07:29.312
e usar <i>setInterval</i> em navegadores antigos.

0:07:30.101,0:07:32.521
Essa é a questão do desenvolvimento web.

0:07:32.579,0:07:34.729
A rede está está mudando o tempo todo,

0:07:34.866,0:07:37.216
navegadores estão incluindo [br]novas características

0:07:37.216,0:07:40.946
desenvolvedores estão descobrindo novas [br]maneira de usar essas características.

0:07:40.946,0:07:43.861
Você tem que estar aprendendo[br]constantemente o que há de novo,

0:07:43.861,0:07:46.244
e o que é melhor para[br]o que você quer fazer.

0:07:46.262,0:07:48.132
Legendado por [Valter Bigeli][br]Revisado por [Fernando dos Reis]