1
00:00:00,930 --> 00:00:03,213
Estamos de volta com contador do Oh noes.
2
00:00:03,643 --> 00:00:09,106
Se quisermos fazer o Oh Noes ficar maior
conforme o contador se aproxima de zero.
3
00:00:09,461 --> 00:00:11,771
Para deixar mais dramático.
4
00:00:12,690 --> 00:00:16,850
Uma maneira de fazer isso é
animar o CSS dessa imagem.
5
00:00:17,319 --> 00:00:19,139
com a propriedade window.setInterval
6
00:00:20,271 --> 00:00:24,541
O primeiro passo é pegar a
imagem e armazenar em uma variável.
7
00:00:24,801 --> 00:00:30,391
var ohnoes =
document.getelementById("ohnoes");
8
00:00:31,981 --> 00:00:36,341
Vou configurar o tamanho inicial
ohnoes.style.width = "50px";
9
00:00:36,458 --> 00:00:39,418
Assim temos um tamanho inicial para
começar aumentar a imagem.
10
00:00:39,508 --> 00:00:43,885
E agora vou criar a função makeItBigger.
11
00:00:44,483 --> 00:00:47,643
Que será responsável por
aumentar a imagem.
12
00:00:48,194 --> 00:00:52,784
Dentro da função precisamos mudar
a propriedade width (largura) da imagem.
13
00:00:52,949 --> 00:00:58,011
Adicionando um ao
tamanho anterior da imagem.
14
00:01:00,071 --> 00:01:04,191
Por fim vou executar a função
window.SetInterval
15
00:01:04,191 --> 00:01:06,911
window.setInterval(makeItBigger)
16
00:01:06,911 --> 00:01:11,470
Com que frequência você quer aumentar?
17
00:01:11,470 --> 00:01:13,780
Queremos uma animação suave
18
00:01:13,789 --> 00:01:16,750
O que significa que queremos algo
entre 24 quadros por segundo
19
00:01:16,750 --> 00:01:18,220
e 60 quadros por segundo.
20
00:01:19,010 --> 00:01:21,180
Vou experimentar 30 quadros por segundo.
21
00:01:21,296 --> 00:01:24,166
Que é 1000 dividido por 30.
22
00:01:24,925 --> 00:01:27,955
Bem, não está funcionando.
23
00:01:28,588 --> 00:01:30,728
Você sabe o porque?
É um pouco complicado.
24
00:01:30,848 --> 00:01:33,809
Vamos dar uma olhada nesse
trecho de código.
25
00:01:34,195 --> 00:01:39,105
Qual é o valor de ohnoes.style.width?
26
00:01:39,108 --> 00:01:40,998
Após essa linha ser executada?
27
00:01:41,485 --> 00:01:45,757
Você pode achar que foi
de 50 para 51 pixels,
28
00:01:45,757 --> 00:01:50,156
mas vamos imprimir o resultado
pra ver qual é o valor.
29
00:01:50,156 --> 00:01:52,445
Vou incluir o log na div com
o seguinte comando
30
00:01:52,445 --> 00:01:56,245
infoDiv.textContent = ohnoes.style.width;
31
00:01:58,543 --> 00:02:04,813
E então vamos adicionar 1 a 50 pixels.
32
00:02:05,429 --> 00:02:07,700
Quanto é 50 pixels + 1?
33
00:02:07,700 --> 00:02:09,828
Você deve pensar que é 51 pixels,
34
00:02:09,828 --> 00:02:14,848
mas JavaScript interpreta os
50 pixels como uma string.
35
00:02:15,787 --> 00:02:20,037
Então na verdade acaba virando "50px1".
36
00:02:20,058 --> 00:02:21,978
O que não faz sentido nenhum.
37
00:02:22,551 --> 00:02:25,790
Logo o navegador está
simplesmente ignorando nossa tentativa
38
00:02:25,790 --> 00:02:29,040
de mudar o valor da propriedade width
para algo sem o menor sentido.
39
00:02:29,702 --> 00:02:35,492
Então precisamos converter essa
unidade em um número,
40
00:02:35,648 --> 00:02:39,968
e então adicionar 1 e só depois
adicionar o "px" novamente.
41
00:02:40,678 --> 00:02:45,360
Podemos fazer a conversão para
número com a função ParseFlow
42
00:02:45,360 --> 00:02:53,100
coloca-lá entre chaves e concatenar
o "px" no final.
43
00:02:53,237 --> 00:02:55,977
E está funcionando, está ficando maior.
44
00:02:56,232 --> 00:02:57,629
Certo.
45
00:02:58,229 --> 00:03:01,321
Você viu a dificuldade de animar
propriedades do CSS.
46
00:03:01,321 --> 00:03:03,792
Geralmente as propriedades
tem as unidades anexadas,
47
00:03:03,792 --> 00:03:05,892
então você vai ter que converter
para número
48
00:03:05,932 --> 00:03:07,385
Meu Deus está ficando maior !
49
00:03:07,385 --> 00:03:08,915
converter para um tipo numérico.
50
00:03:08,915 --> 00:03:11,265
e concatenar o identificador
da unidade novamente
51
00:03:11,265 --> 00:03:14,426
Ok, está ficando bem assustador !
52
00:03:14,477 --> 00:03:18,947
Na verdade há nada de complicado
no uso do SetInterval
53
00:03:18,947 --> 00:03:20,925
para animar propriedades.
54
00:03:21,337 --> 00:03:27,447
Primeiro, o navegador não
garante que o intervalo será obedecido.
55
00:03:28,647 --> 00:03:31,807
Outras coisas podem surgir como
interação com o usuário.
56
00:03:31,814 --> 00:03:33,164
Como o usuário digitar algo.
57
00:03:33,164 --> 00:03:36,168
E isso pode fazer com que sua
função seja executada mais tarde.
58
00:03:36,168 --> 00:03:38,297
Assim você não terá essa animação suave.
59
00:03:38,999 --> 00:03:43,125
Segundo, o navegador irá executar essa
função mesmo que a tabela esteja escondida
60
00:03:43,475 --> 00:03:47,035
fazendo uso de processamento
desnecessariamente.
61
00:03:48,184 --> 00:03:51,764
Por isso eu uso uma nova função disponível
em navegadores modernos
62
00:03:51,804 --> 00:03:55,084
desenvolvidos espacialmente com
animações DOM em mente.
63
00:03:55,550 --> 00:03:58,570
É chamada de
windows.RequestAnimationFrame (RFA)
64
00:03:58,860 --> 00:04:02,782
Para usa-lá vamos nos livrar
dessa linha com SetInterval
65
00:04:03,452 --> 00:04:08,102
e vamos executar a RFA
66
00:04:08,762 --> 00:04:11,460
de dentro da função
67
00:04:11,750 --> 00:04:17,420
e referenciar a função makeItBigger.
68
00:04:18,570 --> 00:04:24,190
E então vamos chamar makeItBigger
na função PageLoad
69
00:04:27,230 --> 00:04:30,480
Nossa, está ficando mair
e mais rápido dessa vez.
70
00:04:30,890 --> 00:04:35,631
Agora o navegador chama a função
MakeItBigger logo após imprimir a imagem
71
00:04:35,631 --> 00:04:37,744
Que é cerca de 60 quadros por segundo,
72
00:04:37,744 --> 00:04:39,454
o dobro do que tínhamos antes.
73
00:04:40,021 --> 00:04:43,021
e adicionamos 1 pixel a largura cada vez
74
00:04:43,114 --> 00:04:47,354
e refaz o cálculo em 60
quadros por segundo
75
00:04:47,863 --> 00:04:50,723
Em apenas alguns segundos
ficar maior que a página.
76
00:04:51,053 --> 00:04:52,713
Agora ele se foi.
77
00:04:53,131 --> 00:04:55,301
Como desaceleremos nossa animação?
78
00:04:56,103 --> 00:05:01,092
Há algumas maneiras, mas um modo que eu
gosto é rastrear quanto tempo já passou.
79
00:05:01,092 --> 00:05:04,332
E então calcular qual deveria ser
o novo tamanho baseado nisso.
80
00:05:04,561 --> 00:05:09,091
Começamos guardando o hora que
a animação inicia milisegundos ,
81
00:05:09,123 --> 00:05:10,833
antes da função ser executada.
82
00:05:11,187 --> 00:05:16,657
var startTime = new Date().getTime();
83
00:05:17,151 --> 00:05:20,481
E dentro da função MakeItBigger
armazenamos o hora atual.
84
00:05:20,854 --> 00:05:25,784
var currTime = new Date().getTime();
85
00:05:26,716 --> 00:05:31,636
E no cálculo faremos com que
cresça 30 pixels por segundo.
86
00:05:31,636 --> 00:05:33,982
E o tamanho inicial da imagem 50 px.
87
00:05:34,050 --> 00:05:37,270
Então vamos calcular isso aqui.
88
00:05:37,476 --> 00:05:43,486
Então o valor inicial da variável
newWidth será 50
89
00:05:44,355 --> 00:05:52,477
mais currTime menos startTime em
milissegundos, dividido por 1000
90
00:05:53,207 --> 00:06:00,166
isso tudo vezes 30, porque vamos
aumentar 30 pixels por segundo
91
00:06:00,166 --> 00:06:02,206
Ok, esse é nossa nova largura.
92
00:06:02,501 --> 00:06:09,631
Agora vamos associar o style.width
a essa nova largura.
93
00:06:12,234 --> 00:06:18,774
Aí está, a animação suave em
30 quadros por segundo.
94
00:06:19,506 --> 00:06:24,666
E podemos mudar esse número se quisermos
que cresça mais devagar
95
00:06:25,204 --> 00:06:27,694
ou mais rápido.
96
00:06:30,520 --> 00:06:34,120
Que tal suavizar a animação quando
ela ficar muito grande?
97
00:06:34,150 --> 00:06:37,700
Podemos simplesmente
colocar um if nessa linha
98
00:06:37,985 --> 00:06:42,548
e para que seja executado somente
se a variável currentWidth
99
00:06:42,548 --> 00:06:48,442
for menor que um número, como 300
100
00:06:48,442 --> 00:06:49,612
vamos tentar isso.
101
00:06:54,331 --> 00:06:56,251
Na verdade currentWidth é
102
00:06:56,470 --> 00:06:58,560
Não, newWidth desculpe.
103
00:06:58,746 --> 00:07:01,516
Vamos ver se chega a 300.
104
00:07:03,681 --> 00:07:07,201
Vai Oh noes, você consegue, você consegue.
105
00:07:07,494 --> 00:07:08,464
Perfeito!
106
00:07:09,078 --> 00:07:12,348
Essa técnica de usar a propriedade RFA
107
00:07:12,685 --> 00:07:17,515
deve funcionar para usuários
do Chrome, Firefox ou IE 10 ou superior
108
00:07:18,278 --> 00:07:21,538
Há várias bibliotecas JavaScript e shims
109
00:07:21,759 --> 00:07:25,259
que irão usar RAF
quando estiver disponível
110
00:07:25,472 --> 00:07:29,312
e usar setInterval em navegadores antigos.
111
00:07:30,101 --> 00:07:32,521
Essa é a questão do desenvolvimento web.
112
00:07:32,579 --> 00:07:34,729
A rede está está mudando o tempo todo,
113
00:07:34,866 --> 00:07:37,216
navegadores estão incluindo
novas características
114
00:07:37,216 --> 00:07:40,946
desenvolvedores estão descobrindo novas
maneira de usar essas características.
115
00:07:40,946 --> 00:07:43,861
Você tem que estar aprendendo
constantemente o que há de novo,
116
00:07:43,861 --> 00:07:46,244
e o que é melhor para
o que você quer fazer.
117
00:07:46,262 --> 00:07:48,132
Legendado por [Valter Bigeli]
Revisado por [Fernando dos Reis]