1
00:00:00,350 --> 00:00:03,719
Regresamos con nuestro contador regresivo de "Oh noes",

2
00:00:03,719 --> 00:00:07,135
¿Y si queremos que el chico "Oh noes" sea más grande,

3
00:00:07,135 --> 00:00:09,524
mientras el contador regresivo se acerca a cero?

4
00:00:09,524 --> 00:00:12,779
Para que parezca que se acerca más a una muerte inminente.

5
00:00:12,779 --> 00:00:20,399
Una manera de hacer esto es animar los estilos de CSS con "window.setInterval".

6
00:00:20,399 --> 00:00:24,921
Como primer paso debo encontrar la imagen, y almacenarla en una variable.

7
00:00:24,928 --> 00:00:31,938
'var ohnoes = document.getElementById("ohnoes");'

8
00:00:31,938 --> 00:00:36,742
Y voy a configurar el tamaño inicial, porque tiene que empezar con algún tamaño,

9
00:00:36,742 --> 00:00:39,522
de esa manera tenemos un tamaño desde el que empezamos a hacerlo más grande.

10
00:00:39,522 --> 00:00:44,341
Y ahora voy a escribir la función "makeItBigger",

11
00:00:44,341 --> 00:00:48,263
que será la función responsable de hacerlo más grande cada vez.

12
00:00:48,263 --> 00:00:52,725
Y aquí necesitamos cambiar "style.width",

13
00:00:52,725 --> 00:00:59,965
y al "style.width" anterior debemos sumarle 1.

14
00:00:59,965 --> 00:01:04,584
Finalmente, vamos a llamar "setInterval" con esta función.

15
00:01:04,584 --> 00:01:07,865
"window.setInterval(makeItBigger);",

16
00:01:07,865 --> 00:01:10,155
y ¿hasta qué tamaño queremos que crezca?,

17
00:01:10,155 --> 00:01:12,235
o ¿cada cuánto queremos hacerlo más grande?

18
00:01:12,235 --> 00:01:14,206
Bueno, queremos una animación fluida,

19
00:01:14,206 --> 00:01:15,983
lo que significa que generalmente debe ser entre

20
00:01:15,983 --> 00:01:18,803
24 cuadros por segundo y 60 cuadros por segundo.

21
00:01:18,803 --> 00:01:25,561
Voy a probar con 30 cuadros por segundo, que es 1000 entre 30.

22
00:01:25,561 --> 00:01:28,733
Mmm, ok, no está funcionando.

23
00:01:28,733 --> 00:01:31,250
¿Ves por qué? Es un poco complicado.

24
00:01:31,250 --> 00:01:34,299
Vamos aquí, a pensar un poco en este código.

25
00:01:34,299 --> 00:01:39,209
¿Cuál es el valor de "ohnoes.style.width",

26
00:01:39,209 --> 00:01:41,435
después de esta línea que está aquí?

27
00:01:41,435 --> 00:01:45,824
Bueno, podrías pensar que 50px pasa a ser 51px,

28
00:01:45,824 --> 00:01:50,184
pero vamos a anotar el resultado de "ohnoes.style.width" para ver cuál es el valor.

29
00:01:50,184 --> 00:01:53,013
Vamos a usar "infoDiv" para poner aquí el resultado.

30
00:01:53,013 --> 00:01:58,346
Así que esto es igual a..., vamos a ver,

31
00:01:58,346 --> 00:02:00,369
50px, ok.

32
00:02:00,369 --> 00:02:05,439
Y luego, tratemos de sumar 1 a 50px.

33
00:02:05,462 --> 00:02:07,739
¿Cuánto es 50px más 1?

34
00:02:07,739 --> 00:02:11,427
Probablemente digas que son 51px, pero JavaScript

35
00:02:11,427 --> 00:02:15,807
piensa en 50px como una cadena de caracteres,

36
00:02:15,816 --> 00:02:20,360
así que en realidad esto es igual a "50px1",

37
00:02:20,360 --> 00:02:22,619
lo que en realidad no tiene sentido.

38
00:02:22,619 --> 00:02:25,854
Así que probablemente el navegador esté ignorando nuestro intento

39
00:02:25,854 --> 00:02:29,709
de igualar la propiedad "width" a este valor que no tiene sentido.

40
00:02:29,709 --> 00:02:33,704
Lo que tenemos que hacer en convertir este número que tiene una unidad,

41
00:02:33,704 --> 00:02:35,695
a un número simplemente,

42
00:02:35,695 --> 00:02:37,764
luego sumar 1 a ese número,

43
00:02:37,764 --> 00:02:40,944
y luego añadirle "px" nuevamente.

44
00:02:40,956 --> 00:02:45,456
Podemos hacer esto encerrando este código en "parseFloat",

45
00:02:45,456 --> 00:02:47,444
lo que convierte esto en un número.

46
00:02:47,444 --> 00:02:49,969
Luego encerramos todo esto,

47
00:02:49,969 --> 00:02:53,143
y le sumamos "px" al final.

48
00:02:53,143 --> 00:02:56,658
¡Woo! ¡Está funcionando! ¡Se está haciendo grande!

49
00:02:56,658 --> 00:02:58,018
Muy bien.

50
00:02:58,018 --> 00:02:59,529
Ahora puedes ver la parte difícil

51
00:02:59,529 --> 00:03:01,205
en las animaciones de las propiedades de CSS.

52
00:03:01,205 --> 00:03:03,653
Muchas veces tienen las unidades incluidas, así que

53
00:03:03,653 --> 00:03:06,302
tienes que usar "parseFloat" para quitar las unidades --- ¡Oh Dios mío se está haciendo más grande!

54
00:03:06,302 --> 00:03:10,752
Tienes que quitar las unidades y luego volverlas a incluir.

55
00:03:10,752 --> 00:03:14,270
Ok, pero, se está haciendo realmente espantoso;

56
00:03:14,270 --> 00:03:17,606
y en realidad, hay algunas cosas que dan miedo,

57
00:03:17,606 --> 00:03:21,315
cuando usas "setInterval", para animar las propiedades de CSS.

58
00:03:21,315 --> 00:03:24,327
En primer lugar, el navegador no te garantiza que

59
00:03:24,327 --> 00:03:28,459
obedecerá este retraso que tenemos aquí.

60
00:03:28,459 --> 00:03:31,704
Si se presentan otras cosas como la interacción del usuario,

61
00:03:31,704 --> 00:03:36,034
como cuando el usuario teclea algo, entonces tendrás que llamar a la función "callback" más tarde.

62
00:03:36,034 --> 00:03:38,503
Y entonces no tendrás esta animación suave.

63
00:03:38,503 --> 00:03:41,287
En segundo lugar, el navegador llamará a tu función

64
00:03:41,287 --> 00:03:43,258
aún si esto está oculto,

65
00:03:43,258 --> 00:03:48,118
lo que usará capacidad de procesamiento de la computadora innecesariamente.

66
00:03:48,118 --> 00:03:50,201
Por eso hay una función nueva,

67
00:03:50,201 --> 00:03:51,797
disponible en los navegadores modernos

68
00:03:51,797 --> 00:03:55,283
diseñada específicamente pensando en animaciones del DOM,

69
00:03:55,283 --> 00:03:59,133
y esta función se llama "window.requestAnimationFrame".

70
00:03:59,147 --> 00:04:03,400
Para usarla, nos tenemos que deshacer de esta línea que tiene "setInterval".

71
00:04:03,400 --> 00:04:08,110
Y llamar "requestAnimationFrame"

72
00:04:08,110 --> 00:04:11,558
desde el interior de la función,

73
00:04:11,558 --> 00:04:14,957
y en realidad le daremos una referencia

74
00:04:14,957 --> 00:04:18,927
a la función "makeItBigger".

75
00:04:18,927 --> 00:04:25,377
Entonces llamaremos a la función cuando la página se carga.

76
00:04:25,377 --> 00:04:27,403
"makeItBigger();"

77
00:04:27,403 --> 00:04:31,213
¡Oh! ¡Muy bien, se está haciendo grande muy rápido esta vez!

78
00:04:31,213 --> 00:04:34,524
Ahora el navegador está llamando a la función "makeItBigger" justo antes

79
00:04:34,524 --> 00:04:37,900
de que se repinte, lo que sucede cerca de 60 cuadros por segundo,

80
00:04:37,900 --> 00:04:40,196
el doble de lo que teníamos antes.

81
00:04:40,196 --> 00:04:43,105
Y estamos añadiendo un pixel a la anchura cada vez.

82
00:04:43,105 --> 00:04:45,965
Así que si hacemos el cálculo matemático, y somos geniales en matemáticas aquí,

83
00:04:45,965 --> 00:04:47,906
estamos añadiendo 60 pixeles por segundo.

84
00:04:47,906 --> 00:04:50,957
En sólo pocos segundos crece hasta ser más grande que la página.

85
00:04:50,957 --> 00:04:53,163
Ahora ya no se ve.

86
00:04:53,163 --> 00:04:56,046
¿Cómo hacemos que nuestra animación corra más despacio?

87
00:04:56,046 --> 00:04:58,467
Hay varias maneras, pero una que me gusta

88
00:04:58,467 --> 00:05:01,048
es hacer un seguimiento de cuánto tiempo ha transcurrido,

89
00:05:01,048 --> 00:05:03,702
y luego basados en eso, calcular cuál debería ser

90
00:05:03,702 --> 00:05:04,909
la nueva anchura.

91
00:05:04,909 --> 00:05:08,839
Empezamos por recordar el tiempo inicial, en milisegundos,

92
00:05:08,839 --> 00:05:10,837
antes de llamar a la función.

93
00:05:10,837 --> 00:05:14,717
"var startTime...", ¡Oh!, se sigue haciendo grande otra vez.

94
00:05:14,717 --> 00:05:17,162
"new Date().getTime();"

95
00:05:17,162 --> 00:05:20,762
Y luego dentro de la función "makeItBigger", guardamos el tiempo actual.

96
00:05:20,762 --> 00:05:26,562
"var currentTime = new Date().getTime(),"

97
00:05:26,572 --> 00:05:28,725
Y para hacer el cálculo,

98
00:05:28,725 --> 00:05:31,662
digamos que queremos que crezca 30 pixeles por segundo,

99
00:05:31,662 --> 00:05:34,091
y que empiece en 50 pixeles.

100
00:05:34,091 --> 00:05:37,641
Así que vamos a calcular esto aquí.

101
00:05:37,641 --> 00:05:44,381
Entonces "... newWidth = 50 ", nuestra anchura de inicio,

102
00:05:44,381 --> 00:05:49,171
más el tiempo actual, menos el tiempo inicial,

103
00:05:49,171 --> 00:05:50,961
todo esto está en milisegundos así que tenemos que

104
00:05:50,961 --> 00:05:53,278
dividir esto entre 1000,

105
00:05:53,278 --> 00:05:57,277
y luego multiplicar todo por 30.

106
00:05:57,277 --> 00:06:00,099
Porque queremos que aumente 30 pixeles por segundo.

107
00:06:00,099 --> 00:06:03,493
Ok, así que ésta es nuestra "newWidth", nueva anchura,

108
00:06:03,493 --> 00:06:09,923
y ahora, vamos a configurar "style.width" con esta nueva anchura.

109
00:06:09,923 --> 00:06:14,021
Entonces... "newWidth", ¡Ah! aquí vamos.

110
00:06:14,021 --> 00:06:19,401
Es una linda y suave animación de 30 pixeles por segundo.

111
00:06:19,401 --> 00:06:23,224
Y podemos cambiar este número, si queremos

112
00:06:23,224 --> 00:06:30,754
que crezca más despacio o más rápido.

113
00:06:30,754 --> 00:06:34,362
¿Y si detenemos la animación cuando llegue a ser demasiado grande?

114
00:06:34,362 --> 00:06:37,820
Podemos meter esta línea en un "if",

115
00:06:37,820 --> 00:06:41,241
esta línea de aquí, y sólo ejecutarla

116
00:06:41,241 --> 00:06:45,093
si "currentWidth" es menor que algún número,

117
00:06:45,093 --> 00:06:49,533
por ejemplo 300, vamos a probar esto.

118
00:06:50,984 --> 00:06:53,124
Ok.

119
00:06:54,315 --> 00:06:58,886
En realidad "currentWidth" es igual a... No, debe ser "newWidth".

120
00:06:58,886 --> 00:07:01,526
Ok, vamos a ver si llega a 300.

121
00:07:01,526 --> 00:07:06,436
Tu tu tu, tu tu tu tu. ¡Vamos "Oh noes", tú puedes hacerlo!

122
00:07:07,599 --> 00:07:08,935
¡Ah! ¡Hermoso!

123
00:07:08,935 --> 00:07:12,585
Ahora, esta técnica que usa "requestAnimationFrame"

124
00:07:12,585 --> 00:07:15,328
debe funcionar siempre y cuando el usuario tenga Chrome,

125
00:07:15,328 --> 00:07:18,481
Firefox o IE10+.

126
00:07:18,481 --> 00:07:21,754
Hay diversas librarías de JavaScript y "shims",

127
00:07:21,754 --> 00:07:25,225
que usarán "requestAnimationFrame" cuando esté disponible,

128
00:07:25,225 --> 00:07:30,095
y luego retroceder a "setInterval" en los navegadores anteriores.

129
00:07:30,095 --> 00:07:32,331
Éste es un punto importante en el desarrollo web:

130
00:07:32,331 --> 00:07:34,712
La web está cambiando todo el tiempo,

131
00:07:34,712 --> 00:07:36,399
los navegadores van teniendo nuevas características,

132
00:07:36,399 --> 00:07:40,118
y los desarrolladores están descubriendo nuevas formas de usar esas características.

133
00:07:40,118 --> 00:07:43,699
Debes estar aprendiendo constantemente sobre las cosas nuevas,

134
00:07:43,699 --> 00:07:46,579
y qué es lo mejor para lo que quieres hacer.