-
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.
