WEBVTT

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

00:00:03.643 --> 00:00:09.106
Se quisermos fazer o <i>Oh Noes</i> ficar maior
conforme o contador se aproxima de zero.

00:00:09.461 --> 00:00:11.771
Para deixar mais dramático.

00:00:12.690 --> 00:00:16.850
Uma maneira de fazer isso é 
animar o CSS dessa imagem.

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

00:00:20.271 --> 00:00:24.541
O primeiro passo é pegar a 
imagem e armazenar em uma variável.

00:00:24.801 --> 00:00:30.391
<i>var ohnoes =
 document.getelementById("ohnoes");</i>

00:00:31.981 --> 00:00:36.341
Vou configurar o tamanho inicial 
<i>ohnoes.style.width = "50px";</i>

00:00:36.458 --> 00:00:39.418
Assim temos um tamanho inicial para 
começar aumentar a imagem.

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

00:00:44.483 --> 00:00:47.643
Que será responsável por 
aumentar a imagem.

00:00:48.194 --> 00:00:52.784
Dentro da função precisamos mudar 
a propriedade width (largura) da imagem.

00:00:52.949 --> 00:00:58.011
Adicionando um ao 
tamanho anterior da imagem.

00:01:00.071 --> 00:01:04.191
Por fim vou executar a função 
<i>window.SetInterval</i>

00:01:04.191 --> 00:01:06.911
<i>window.setInterval(makeItBigger)</i>

00:01:06.911 --> 00:01:11.470
Com que frequência você quer aumentar?

00:01:11.470 --> 00:01:13.780
Queremos uma animação suave

00:01:13.789 --> 00:01:16.750
O que significa que queremos algo 
entre 24 quadros por segundo

00:01:16.750 --> 00:01:18.220
e 60 quadros por segundo.

00:01:19.010 --> 00:01:21.180
Vou experimentar 30 quadros por segundo.

00:01:21.296 --> 00:01:24.166
Que é 1000 dividido por 30.

00:01:24.925 --> 00:01:27.955
Bem, não está funcionando.

00:01:28.588 --> 00:01:30.728
Você sabe o porque? 
É um pouco complicado.

00:01:30.848 --> 00:01:33.809
Vamos dar uma olhada nesse
trecho de código.

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

00:01:39.108 --> 00:01:40.998
Após essa linha ser executada?

00:01:41.485 --> 00:01:45.757
Você pode achar que foi 
de 50 para 51 pixels,

00:01:45.757 --> 00:01:50.156
mas vamos imprimir o resultado 
pra ver qual é o valor.

00:01:50.156 --> 00:01:52.445
Vou incluir o <i>log</i> na <i>div</i> com 
o seguinte comando

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

00:01:58.543 --> 00:02:04.813
E então vamos adicionar 1 a 50 pixels.

00:02:05.429 --> 00:02:07.700
Quanto é 50 pixels + 1?

00:02:07.700 --> 00:02:09.828
Você deve pensar que é 51 pixels,

00:02:09.828 --> 00:02:14.848
mas JavaScript interpreta os 
50 pixels como uma <i>string</i>.

00:02:15.787 --> 00:02:20.037
Então na verdade acaba virando "50px1".

00:02:20.058 --> 00:02:21.978
O que não faz sentido nenhum.

00:02:22.551 --> 00:02:25.790
Logo o navegador está 
simplesmente ignorando nossa tentativa

00:02:25.790 --> 00:02:29.040
de mudar o valor da propriedade width 
para algo sem o menor sentido.

00:02:29.702 --> 00:02:35.492
Então precisamos converter essa 
unidade em um número,

00:02:35.648 --> 00:02:39.968
e então adicionar 1 e só depois 
adicionar o "px" novamente.

00:02:40.678 --> 00:02:45.360
Podemos fazer a conversão para 
número com a função <i>ParseFlow</i>

00:02:45.360 --> 00:02:53.100
coloca-lá entre chaves e concatenar 
o "px" no final.

00:02:53.237 --> 00:02:55.977
E está funcionando, está ficando maior.

00:02:56.232 --> 00:02:57.629
Certo.

00:02:58.229 --> 00:03:01.321
Você viu a dificuldade de animar
propriedades do CSS.

00:03:01.321 --> 00:03:03.792
Geralmente as propriedades 
tem as unidades anexadas,

00:03:03.792 --> 00:03:05.892
então você vai ter que converter
para número

00:03:05.932 --> 00:03:07.385
Meu Deus está ficando maior !

00:03:07.385 --> 00:03:08.915
converter para um tipo numérico.

00:03:08.915 --> 00:03:11.265
e concatenar o identificador 
da unidade novamente

00:03:11.265 --> 00:03:14.426
Ok, está ficando bem assustador !

00:03:14.477 --> 00:03:18.947
Na verdade há nada de complicado 
no uso do <i>SetInterval</i>

00:03:18.947 --> 00:03:20.925
para animar propriedades.

00:03:21.337 --> 00:03:27.447
Primeiro, o navegador não 
garante que o intervalo será obedecido.

00:03:28.647 --> 00:03:31.807
Outras coisas podem surgir como 
interação com o usuário.

00:03:31.814 --> 00:03:33.164
Como o usuário digitar algo.

00:03:33.164 --> 00:03:36.168
E isso pode fazer com que sua 
função seja executada mais tarde.

00:03:36.168 --> 00:03:38.297
Assim você não terá essa animação suave.

00:03:38.999 --> 00:03:43.125
Segundo, o navegador irá executar essa
função mesmo que a tabela esteja escondida

00:03:43.475 --> 00:03:47.035
fazendo uso de processamento
desnecessariamente.

00:03:48.184 --> 00:03:51.764
Por isso eu uso uma nova função disponível
em navegadores modernos

00:03:51.804 --> 00:03:55.084
desenvolvidos espacialmente com 
animações DOM em mente.

00:03:55.550 --> 00:03:58.570
É chamada de 
<i>windows.RequestAnimationFrame (RFA)</i>

00:03:58.860 --> 00:04:02.782
Para usa-lá vamos nos livrar 
dessa linha com <i>SetInterval</i>

00:04:03.452 --> 00:04:08.102
e vamos executar a RFA

00:04:08.762 --> 00:04:11.460
de dentro da função 


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

00:04:18.570 --> 00:04:24.190
E então vamos chamar <i>makeItBigger</i>
na função <i>PageLoad</i>

00:04:27.230 --> 00:04:30.480
Nossa, está ficando mair 
e mais rápido dessa vez.

00:04:30.890 --> 00:04:35.631
Agora o navegador chama a função
<i>MakeItBigger</i> logo após imprimir a imagem

00:04:35.631 --> 00:04:37.744
Que é cerca de 60 quadros por segundo,

00:04:37.744 --> 00:04:39.454
o dobro do que tínhamos antes.

00:04:40.021 --> 00:04:43.021
e adicionamos 1 pixel a largura cada vez

00:04:43.114 --> 00:04:47.354
e refaz o cálculo em 60 
quadros por segundo

00:04:47.863 --> 00:04:50.723
Em apenas alguns segundos 
ficar maior que a página.

00:04:51.053 --> 00:04:52.713
Agora ele se foi.

00:04:53.131 --> 00:04:55.301
Como desaceleremos nossa animação?

00:04:56.103 --> 00:05:01.092
Há algumas maneiras, mas um modo que eu 
gosto é rastrear quanto tempo já passou.

00:05:01.092 --> 00:05:04.332
E então calcular qual deveria ser 
o novo tamanho baseado nisso.

00:05:04.561 --> 00:05:09.091
Começamos guardando o hora que 
a animação inicia milisegundos ,

00:05:09.123 --> 00:05:10.833
antes da função ser executada.

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

00:05:17.151 --> 00:05:20.481
E dentro da função <i>MakeItBigger </i>
armazenamos o hora atual.

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

00:05:26.716 --> 00:05:31.636
E no cálculo faremos com que 
cresça 30 pixels por segundo.

00:05:31.636 --> 00:05:33.982
E o tamanho inicial da imagem 50 px.

00:05:34.050 --> 00:05:37.270
Então vamos calcular isso aqui.

00:05:37.476 --> 00:05:43.486
Então o valor inicial da variável 
<i>newWidth</i> será 50

00:05:44.355 --> 00:05:52.477
mais <i>currTime</i> menos <i>startTime</i> em 
milissegundos, dividido por 1000

00:05:53.207 --> 00:06:00.166
isso tudo vezes 30, porque vamos 
aumentar 30 pixels por segundo

00:06:00.166 --> 00:06:02.206
Ok, esse é nossa nova largura.

00:06:02.501 --> 00:06:09.631
Agora vamos associar o <i>style.width</i>
a essa nova largura.

00:06:12.234 --> 00:06:18.774
Aí está, a animação suave em 
30 quadros por segundo.

00:06:19.506 --> 00:06:24.666
E podemos mudar esse número se quisermos 
que cresça mais devagar

00:06:25.204 --> 00:06:27.694
ou mais rápido.

00:06:30.520 --> 00:06:34.120
Que tal suavizar a animação quando 
ela ficar muito grande?

00:06:34.150 --> 00:06:37.700
Podemos simplesmente 
colocar um <i>if</i> nessa linha

00:06:37.985 --> 00:06:42.548
e para que seja executado somente 
se a variável <i>currentWidth</i>

00:06:42.548 --> 00:06:48.442
for menor que um número, como 300

00:06:48.442 --> 00:06:49.612
vamos tentar isso.

00:06:54.331 --> 00:06:56.251
Na verdade <i>currentWidth</i> é

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

00:06:58.746 --> 00:07:01.516
Vamos ver se chega a 300.

00:07:03.681 --> 00:07:07.201
Vai Oh noes, você consegue, você consegue.

00:07:07.494 --> 00:07:08.464
Perfeito!

00:07:09.078 --> 00:07:12.348
Essa técnica de usar a propriedade RFA

00:07:12.685 --> 00:07:17.515
deve funcionar para usuários 
do Chrome, Firefox ou IE 10 ou superior

00:07:18.278 --> 00:07:21.538
Há várias bibliotecas JavaScript e shims

00:07:21.759 --> 00:07:25.259
que irão usar RAF
quando estiver disponível

00:07:25.472 --> 00:07:29.312
e usar <i>setInterval</i> em navegadores antigos.

00:07:30.101 --> 00:07:32.521
Essa é a questão do desenvolvimento web.

00:07:32.579 --> 00:07:34.729
A rede está está mudando o tempo todo,

00:07:34.866 --> 00:07:37.216
navegadores estão incluindo 
novas características

00:07:37.216 --> 00:07:40.946
desenvolvedores estão descobrindo novas 
maneira de usar essas características.

00:07:40.946 --> 00:07:43.861
Você tem que estar aprendendo
constantemente o que há de novo,

00:07:43.861 --> 00:07:46.244
e o que é melhor para
o que você quer fazer.

00:07:46.262 --> 00:07:48.132
Legendado por [Valter Bigeli]
Revisado por [Fernando dos Reis]