Animando estilos con RAF (Versión en Video)

Regresamos con nuestro contador regresivo de "Oh noes",

¿Y si queremos que el chico "Oh noes" sea más grande,

mientras el contador regresivo se acerca a cero?

Para que parezca que se acerca más a una muerte inminente.

Una manera de hacer esto es animar los estilos de CSS con "window.setInterval".

Como primer paso debo encontrar la imagen, y almacenarla en una variable.

'var ohnoes = document.getElementById("ohnoes");'

Y voy a configurar el tamaño inicial, porque tiene que empezar con algún tamaño,

de esa manera tenemos un tamaño desde el que empezamos a hacerlo más grande.

Y ahora voy a escribir la función "makeItBigger",

que será la función responsable de hacerlo más grande cada vez.

Y aquí necesitamos cambiar "style.width",

y al "style.width" anterior debemos sumarle 1.

Finalmente, vamos a llamar "setInterval" con esta función.

"window.setInterval(makeItBigger);",

y ¿hasta qué tamaño queremos que crezca?,

o ¿cada cuánto queremos hacerlo más grande?

Bueno, queremos una animación fluida,

lo que significa que generalmente debe ser entre

24 cuadros por segundo y 60 cuadros por segundo.

Voy a probar con 30 cuadros por segundo, que es 1000 entre 30.

Mmm, ok, no está funcionando.

¿Ves por qué? Es un poco complicado.

Vamos aquí, a pensar un poco en este código.

¿Cuál es el valor de "ohnoes.style.width",

después de esta línea que está aquí?

Bueno, podrías pensar que 50px pasa a ser 51px,

pero vamos a anotar el resultado de "ohnoes.style.width" para ver cuál es el valor.

Vamos a usar "infoDiv" para poner aquí el resultado.

Así que esto es igual a..., vamos a ver,

50px, ok.

Y luego, tratemos de sumar 1 a 50px.

¿Cuánto es 50px más 1?

Probablemente digas que son 51px, pero JavaScript

piensa en 50px como una cadena de caracteres,

así que en realidad esto es igual a "50px1",

lo que en realidad no tiene sentido.

Así que probablemente el navegador esté ignorando nuestro intento

de igualar la propiedad "width" a este valor que no tiene sentido.

Lo que tenemos que hacer en convertir este número que tiene una unidad,

a un número simplemente,

luego sumar 1 a ese número,

y luego añadirle "px" nuevamente.

Podemos hacer esto encerrando este código en "parseFloat",

lo que convierte esto en un número.

Luego encerramos todo esto,

y le sumamos "px" al final.

¡Woo! ¡Está funcionando! ¡Se está haciendo grande!

Muy bien.

Ahora puedes ver la parte difícil

en las animaciones de las propiedades de CSS.

Muchas veces tienen las unidades incluidas, así que

tienes que usar "parseFloat" para quitar las unidades --- ¡Oh Dios mío se está haciendo más grande!

Tienes que quitar las unidades y luego volverlas a incluir.

Ok, pero, se está haciendo realmente espantoso;

y en realidad, hay algunas cosas que dan miedo,

cuando usas "setInterval", para animar las propiedades de CSS.

En primer lugar, el navegador no te garantiza que

obedecerá este retraso que tenemos aquí.

Si se presentan otras cosas como la interacción del usuario,

como cuando el usuario teclea algo, entonces tendrás que llamar a la función "callback" más tarde.

Y entonces no tendrás esta animación suave.

En segundo lugar, el navegador llamará a tu función

aún si esto está oculto,

lo que usará capacidad de procesamiento de la computadora innecesariamente.

Por eso hay una función nueva,

disponible en los navegadores modernos

diseñada específicamente pensando en animaciones del DOM,

y esta función se llama "window.requestAnimationFrame".

Para usarla, nos tenemos que deshacer de esta línea que tiene "setInterval".

Y llamar "requestAnimationFrame"

desde el interior de la función,

y en realidad le daremos una referencia

a la función "makeItBigger".

Entonces llamaremos a la función cuando la página se carga.

"makeItBigger();"

¡Oh! ¡Muy bien, se está haciendo grande muy rápido esta vez!

Ahora el navegador está llamando a la función "makeItBigger" justo antes

de que se repinte, lo que sucede cerca de 60 cuadros por segundo,

el doble de lo que teníamos antes.

Y estamos añadiendo un pixel a la anchura cada vez.

Así que si hacemos el cálculo matemático, y somos geniales en matemáticas aquí,

estamos añadiendo 60 pixeles por segundo.

En sólo pocos segundos crece hasta ser más grande que la página.

Ahora ya no se ve.

¿Cómo hacemos que nuestra animación corra más despacio?

Hay varias maneras, pero una que me gusta

es hacer un seguimiento de cuánto tiempo ha transcurrido,

y luego basados en eso, calcular cuál debería ser

la nueva anchura.

Empezamos por recordar el tiempo inicial, en milisegundos,

antes de llamar a la función.

"var startTime...", ¡Oh!, se sigue haciendo grande otra vez.

"new Date().getTime();"

Y luego dentro de la función "makeItBigger", guardamos el tiempo actual.

"var currentTime = new Date().getTime(),"

Y para hacer el cálculo,

digamos que queremos que crezca 30 pixeles por segundo,

y que empiece en 50 pixeles.

Así que vamos a calcular esto aquí.

Entonces "... newWidth = 50 ", nuestra anchura de inicio,

más el tiempo actual, menos el tiempo inicial,

todo esto está en milisegundos así que tenemos que

dividir esto entre 1000,

y luego multiplicar todo por 30.

Porque queremos que aumente 30 pixeles por segundo.

Ok, así que ésta es nuestra "newWidth", nueva anchura,

y ahora, vamos a configurar "style.width" con esta nueva anchura.

Entonces... "newWidth", ¡Ah! aquí vamos.

Es una linda y suave animación de 30 pixeles por segundo.

Y podemos cambiar este número, si queremos

que crezca más despacio o más rápido.

¿Y si detenemos la animación cuando llegue a ser demasiado grande?

Podemos meter esta línea en un "if",

esta línea de aquí, y sólo ejecutarla

si "currentWidth" es menor que algún número,

por ejemplo 300, vamos a probar esto.

Ok.

En realidad "currentWidth" es igual a... No, debe ser "newWidth".

Ok, vamos a ver si llega a 300.

Tu tu tu, tu tu tu tu. ¡Vamos "Oh noes", tú puedes hacerlo!

¡Ah! ¡Hermoso!

Ahora, esta técnica que usa "requestAnimationFrame"

debe funcionar siempre y cuando el usuario tenga Chrome,

Firefox o IE10+.

Hay diversas librarías de JavaScript y "shims",

que usarán "requestAnimationFrame" cuando esté disponible,

y luego retroceder a "setInterval" en los navegadores anteriores.

Éste es un punto importante en el desarrollo web:

La web está cambiando todo el tiempo,

los navegadores van teniendo nuevas características,

y los desarrolladores están descubriendo nuevas formas de usar esas características.

Debes estar aprendiendo constantemente sobre las cosas nuevas,

y qué es lo mejor para lo que quieres hacer.