WEBVTT

00:00:00.350 --> 00:00:03.719
Regresamos con nuestro contador regresivo de "Oh noes",

00:00:03.719 --> 00:00:07.135
¿Y si queremos que el chico "Oh noes" sea más grande,

00:00:07.135 --> 00:00:09.524
mientras el contador regresivo se acerca a cero?

00:00:09.524 --> 00:00:12.779
Para que parezca que se acerca más a una muerte inminente.

00:00:12.779 --> 00:00:20.399
Una manera de hacer esto es animar los estilos de CSS con "window.setInterval".

00:00:20.399 --> 00:00:24.921
Como primer paso debo encontrar la imagen, y almacenarla en una variable.

00:00:24.928 --> 00:00:31.938
'var ohnoes = document.getElementById("ohnoes");'

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,

00:00:36.742 --> 00:00:39.522
de esa manera tenemos un tamaño desde el que empezamos a hacerlo más grande.

00:00:39.522 --> 00:00:44.341
Y ahora voy a escribir la función "makeItBigger",

00:00:44.341 --> 00:00:48.263
que será la función responsable de hacerlo más grande cada vez.

00:00:48.263 --> 00:00:52.725
Y aquí necesitamos cambiar "style.width",

00:00:52.725 --> 00:00:59.965
y al "style.width" anterior debemos sumarle 1.

00:00:59.965 --> 00:01:04.584
Finalmente, vamos a llamar "setInterval" con esta función.

00:01:04.584 --> 00:01:07.865
"window.setInterval(makeItBigger);",

00:01:07.865 --> 00:01:10.155
y ¿hasta qué tamaño queremos que crezca?,

00:01:10.155 --> 00:01:12.235
o ¿cada cuánto queremos hacerlo más grande?

00:01:12.235 --> 00:01:14.206
Bueno, queremos una animación fluida,

00:01:14.206 --> 00:01:15.983
lo que significa que generalmente debe ser entre

00:01:15.983 --> 00:01:18.803
24 cuadros por segundo y 60 cuadros por segundo.

00:01:18.803 --> 00:01:25.561
Voy a probar con 30 cuadros por segundo, que es 1000 entre 30.

00:01:25.561 --> 00:01:28.733
Mmm, ok, no está funcionando.

00:01:28.733 --> 00:01:31.250
¿Ves por qué? Es un poco complicado.

00:01:31.250 --> 00:01:34.299
Vamos aquí, a pensar un poco en este código.

00:01:34.299 --> 00:01:39.209
¿Cuál es el valor de "ohnoes.style.width",

00:01:39.209 --> 00:01:41.435
después de esta línea que está aquí?

00:01:41.435 --> 00:01:45.824
Bueno, podrías pensar que 50px pasa a ser 51px,

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.

00:01:50.184 --> 00:01:53.013
Vamos a usar "infoDiv" para poner aquí el resultado.

00:01:53.013 --> 00:01:58.346
Así que esto es igual a..., vamos a ver,

00:01:58.346 --> 00:02:00.369
50px, ok.

00:02:00.369 --> 00:02:05.439
Y luego, tratemos de sumar 1 a 50px.

00:02:05.462 --> 00:02:07.739
¿Cuánto es 50px más 1?

00:02:07.739 --> 00:02:11.427
Probablemente digas que son 51px, pero JavaScript

00:02:11.427 --> 00:02:15.807
piensa en 50px como una cadena de caracteres,

00:02:15.816 --> 00:02:20.360
así que en realidad esto es igual a "50px1",

00:02:20.360 --> 00:02:22.619
lo que en realidad no tiene sentido.

00:02:22.619 --> 00:02:25.854
Así que probablemente el navegador esté ignorando nuestro intento

00:02:25.854 --> 00:02:29.709
de igualar la propiedad "width" a este valor que no tiene sentido.

00:02:29.709 --> 00:02:33.704
Lo que tenemos que hacer en convertir este número que tiene una unidad,

00:02:33.704 --> 00:02:35.695
a un número simplemente,

00:02:35.695 --> 00:02:37.764
luego sumar 1 a ese número,

00:02:37.764 --> 00:02:40.944
y luego añadirle "px" nuevamente.

00:02:40.956 --> 00:02:45.456
Podemos hacer esto encerrando este código en "parseFloat",

00:02:45.456 --> 00:02:47.444
lo que convierte esto en un número.

00:02:47.444 --> 00:02:49.969
Luego encerramos todo esto,

00:02:49.969 --> 00:02:53.143
y le sumamos "px" al final.

00:02:53.143 --> 00:02:56.658
¡Woo! ¡Está funcionando! ¡Se está haciendo grande!

00:02:56.658 --> 00:02:58.018
Muy bien.

00:02:58.018 --> 00:02:59.529
Ahora puedes ver la parte difícil

00:02:59.529 --> 00:03:01.205
en las animaciones de las propiedades de CSS.

00:03:01.205 --> 00:03:03.653
Muchas veces tienen las unidades incluidas, así que

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!

00:03:06.302 --> 00:03:10.752
Tienes que quitar las unidades y luego volverlas a incluir.

00:03:10.752 --> 00:03:14.270
Ok, pero, se está haciendo realmente espantoso;

00:03:14.270 --> 00:03:17.606
y en realidad, hay algunas cosas que dan miedo,

00:03:17.606 --> 00:03:21.315
cuando usas "setInterval", para animar las propiedades de CSS.

00:03:21.315 --> 00:03:24.327
En primer lugar, el navegador no te garantiza que

00:03:24.327 --> 00:03:28.459
obedecerá este retraso que tenemos aquí.

00:03:28.459 --> 00:03:31.704
Si se presentan otras cosas como la interacción del usuario,

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.

00:03:36.034 --> 00:03:38.503
Y entonces no tendrás esta animación suave.

00:03:38.503 --> 00:03:41.287
En segundo lugar, el navegador llamará a tu función

00:03:41.287 --> 00:03:43.258
aún si esto está oculto,

00:03:43.258 --> 00:03:48.118
lo que usará capacidad de procesamiento de la computadora innecesariamente.

00:03:48.118 --> 00:03:50.201
Por eso hay una función nueva,

00:03:50.201 --> 00:03:51.797
disponible en los navegadores modernos

00:03:51.797 --> 00:03:55.283
diseñada específicamente pensando en animaciones del DOM,

00:03:55.283 --> 00:03:59.133
y esta función se llama "window.requestAnimationFrame".

00:03:59.147 --> 00:04:03.400
Para usarla, nos tenemos que deshacer de esta línea que tiene "setInterval".

00:04:03.400 --> 00:04:08.110
Y llamar "requestAnimationFrame"

00:04:08.110 --> 00:04:11.558
desde el interior de la función,

00:04:11.558 --> 00:04:14.957
y en realidad le daremos una referencia

00:04:14.957 --> 00:04:18.927
a la función "makeItBigger".

00:04:18.927 --> 00:04:25.377
Entonces llamaremos a la función cuando la página se carga.

00:04:25.377 --> 00:04:27.403
"makeItBigger();"

00:04:27.403 --> 00:04:31.213
¡Oh! ¡Muy bien, se está haciendo grande muy rápido esta vez!

00:04:31.213 --> 00:04:34.524
Ahora el navegador está llamando a la función "makeItBigger" justo antes

00:04:34.524 --> 00:04:37.900
de que se repinte, lo que sucede cerca de 60 cuadros por segundo,

00:04:37.900 --> 00:04:40.196
el doble de lo que teníamos antes.

00:04:40.196 --> 00:04:43.105
Y estamos añadiendo un pixel a la anchura cada vez.

00:04:43.105 --> 00:04:45.965
Así que si hacemos el cálculo matemático, y somos geniales en matemáticas aquí,

00:04:45.965 --> 00:04:47.906
estamos añadiendo 60 pixeles por segundo.

00:04:47.906 --> 00:04:50.957
En sólo pocos segundos crece hasta ser más grande que la página.

00:04:50.957 --> 00:04:53.163
Ahora ya no se ve.

00:04:53.163 --> 00:04:56.046
¿Cómo hacemos que nuestra animación corra más despacio?

00:04:56.046 --> 00:04:58.467
Hay varias maneras, pero una que me gusta

00:04:58.467 --> 00:05:01.048
es hacer un seguimiento de cuánto tiempo ha transcurrido,

00:05:01.048 --> 00:05:03.702
y luego basados en eso, calcular cuál debería ser

00:05:03.702 --> 00:05:04.909
la nueva anchura.

00:05:04.909 --> 00:05:08.839
Empezamos por recordar el tiempo inicial, en milisegundos,

00:05:08.839 --> 00:05:10.837
antes de llamar a la función.

00:05:10.837 --> 00:05:14.717
"var startTime...", ¡Oh!, se sigue haciendo grande otra vez.

00:05:14.717 --> 00:05:17.162
"new Date().getTime();"

00:05:17.162 --> 00:05:20.762
Y luego dentro de la función "makeItBigger", guardamos el tiempo actual.

00:05:20.762 --> 00:05:26.562
"var currentTime = new Date().getTime(),"

00:05:26.572 --> 00:05:28.725
Y para hacer el cálculo,

00:05:28.725 --> 00:05:31.662
digamos que queremos que crezca 30 pixeles por segundo,

00:05:31.662 --> 00:05:34.091
y que empiece en 50 pixeles.

00:05:34.091 --> 00:05:37.641
Así que vamos a calcular esto aquí.

00:05:37.641 --> 00:05:44.381
Entonces "... newWidth = 50 ", nuestra anchura de inicio,

00:05:44.381 --> 00:05:49.171
más el tiempo actual, menos el tiempo inicial,

00:05:49.171 --> 00:05:50.961
todo esto está en milisegundos así que tenemos que

00:05:50.961 --> 00:05:53.278
dividir esto entre 1000,

00:05:53.278 --> 00:05:57.277
y luego multiplicar todo por 30.

00:05:57.277 --> 00:06:00.099
Porque queremos que aumente 30 pixeles por segundo.

00:06:00.099 --> 00:06:03.493
Ok, así que ésta es nuestra "newWidth", nueva anchura,

00:06:03.493 --> 00:06:09.923
y ahora, vamos a configurar "style.width" con esta nueva anchura.

00:06:09.923 --> 00:06:14.021
Entonces... "newWidth", ¡Ah! aquí vamos.

00:06:14.021 --> 00:06:19.401
Es una linda y suave animación de 30 pixeles por segundo.

00:06:19.401 --> 00:06:23.224
Y podemos cambiar este número, si queremos

00:06:23.224 --> 00:06:30.754
que crezca más despacio o más rápido.

00:06:30.754 --> 00:06:34.362
¿Y si detenemos la animación cuando llegue a ser demasiado grande?

00:06:34.362 --> 00:06:37.820
Podemos meter esta línea en un "if",

00:06:37.820 --> 00:06:41.241
esta línea de aquí, y sólo ejecutarla

00:06:41.241 --> 00:06:45.093
si "currentWidth" es menor que algún número,

00:06:45.093 --> 00:06:49.533
por ejemplo 300, vamos a probar esto.

00:06:50.984 --> 00:06:53.124
Ok.

00:06:54.315 --> 00:06:58.886
En realidad "currentWidth" es igual a... No, debe ser "newWidth".

00:06:58.886 --> 00:07:01.526
Ok, vamos a ver si llega a 300.

00:07:01.526 --> 00:07:06.436
Tu tu tu, tu tu tu tu. ¡Vamos "Oh noes", tú puedes hacerlo!

00:07:07.599 --> 00:07:08.935
¡Ah! ¡Hermoso!

00:07:08.935 --> 00:07:12.585
Ahora, esta técnica que usa "requestAnimationFrame"

00:07:12.585 --> 00:07:15.328
debe funcionar siempre y cuando el usuario tenga Chrome,

00:07:15.328 --> 00:07:18.481
Firefox o IE10+.

00:07:18.481 --> 00:07:21.754
Hay diversas librarías de JavaScript y "shims",

00:07:21.754 --> 00:07:25.225
que usarán "requestAnimationFrame" cuando esté disponible,

00:07:25.225 --> 00:07:30.095
y luego retroceder a "setInterval" en los navegadores anteriores.

00:07:30.095 --> 00:07:32.331
Éste es un punto importante en el desarrollo web:

00:07:32.331 --> 00:07:34.712
La web está cambiando todo el tiempo,

00:07:34.712 --> 00:07:36.399
los navegadores van teniendo nuevas características,

00:07:36.399 --> 00:07:40.118
y los desarrolladores están descubriendo nuevas formas de usar esas características.

00:07:40.118 --> 00:07:43.699
Debes estar aprendiendo constantemente sobre las cosas nuevas,

00:07:43.699 --> 00:07:46.579
y qué es lo mejor para lo que quieres hacer.