Animaciónes reales utilizando JavaScript, CSS3 y HTML5 Video

Cuando estaba en la escuela para ser un animador 3D, leí un libro llamado “El tiempo para la animación”. Aunque sólo son 152 páginas, es fundamentalmente la biblia de la animación para cualquiera que quiera ser un gran animador. De hecho, el director creativo de Pixar John Lasseter usó la primera edición como referencia cuando él era un animador de Walt Disney Studios en la década de 80s.
En el libro, los autores John Halas y Whitaker Harold aconsejan:
El tiempo es la parte de la animación que da sentido al movimiento. El movimiento puede lograrse con facilidad mediante la elaboración de la misma cosa en dos posiciones diferentes y la inserción de una serie de dibujos de otro tipo entre los dos. El resultado en la pantalla será el movimiento, pero no será una animación.
Pero eso es exactamente lo que estamos haciendo con CSS3 y JavaScript: estamos moviendo elementos no animándolos. Estamos constantemente especificando los estados inicial y final y que permite a la tecnología la interpolación entre los dos. Y, sin embargo, son los matices sin esos marcos de en medio que crean el sentido de la vida que estamos buscando.
A medida que aumenta el ancho de banda y el renderizado del navegador se vuelve más coherente, podemos crear interacciones en formas diferentes de lo que habíamos podido hacer antes. Estamos encontrando más y más movimiento en los sitios que en las generalmente solo había etiquetas “estáticas”. Sin embargo, este movimiento es más que nada solo movimiento, no animación. Es la manipulación de las propiedades de un elemento más comunes: ancho y alto; coordenadas x y, y la opacidad.
Entonces, ¿cómo crear una animación real?

La metáfora

En mi experiencia, la animación es más creíble cuando se simula, exagera, o desafía al mundo real. Una bola de boliche cae de manera diferente que una frontón. Cada una tiene diferentes pesos y tamaños, que afectan la forma en que caen a la tierra, rebotan, e impactan otros objetos.
Esta es una de las principales razones por las que la animación JavaScript con frecuencia se siente mecánica, no se completa una metáfora. Expandir y colapsar un <div> se siente muy diferente que abrir una puerta o desplegar una hoja de papel, pero a menudo no. La propia interacción debe vinculan directamente a la dirección de arte de una página.

Física

Entender la física en una situación es clave para la creación de animaciones convincentes, aunque la animación trata de desafiar a la física convencional. La primera ley de Isaac Newton de los estados de movimiento: “Todo cuerpo permanece en un estado de reposo o movimiento uniforme (velocidad constante) a menos que se actúe sobre él una fuerza externa no equilibrada.” Una vez que una fuerza actúa sobre un objeto, la forma del objeto puede cambiar, dependiendo de la intensidad de la fuerza y la masa del objeto. Otra pepita de sabiduría de Halas y Whitaker:
Todos los objetos en la naturaleza tienen su propio peso, construcción, y grado de flexibilidad, por lo que cada uno se comporta de manera individual, cuando una fuerza actúa sobre él. Este comportamiento, una combinación de la posición y el momento, es la base de la animación. La pregunta básica que un animador se pregunta constantemente es la siguiente: “¿Qué pasará con este objeto, cuando una fuerza actúa sobre él?” Y el éxito de su animación en gran medida depende de lo bien que responde a esta pregunta.
En la animación con CSS3 y JavaScript, mantenga en la mente la física. ¿Cuán ‘pesado’ es el elemento con el que  estás interactuando? ¿Qué tipo de fuerza creo la acción? ¿Fue un pequeño empujoncito? o ¿un fuerte empujón? Estas sutilezas agregaran un sentido de realismo a las animaciones y lo harán mucho más creíble para los usuarios.

Distracción

Los magos utilizan a menudo una distracción para obtener que su público se centrarse en una cosa en lugar de otra. Nos engañamos pensando que sucedió algo que en realidad no pasó.
La animación es lo mismo, especialmente en una pantalla. Al cambiar la disposición de los píxeles en la pantalla a un ritmo lo suficientemente rápido, los ojos engañar a la mente haciéndola pensar que un objeto en realidad está en movimiento.
Otro componente importante de la distracción en la animación es el uso de varios objetos. Trate de recordar una caricatura donde un personaje se desvanece. Muy a menudo, el personaje hace una especie de movimiento exagerado (esto se llama previsión) y luego desaparece, y sigue una nube de humo. Ese humo es un elemento extra, pero hace creer que el personaje recorre un largo camino y que de hecho desaparece.
Muy rara vez un personaje desaparece simplemente de ir de un cien por ciento a cero. Eso no es creíble. ¿Entonces por qué lo hacemos con los <div>?
Armados con municiones de metáforas y distracciones, vamos a ver un código de ejemplo.

Movimiento, ruido y enrollar

(Estas demostraciones requieren por lo menos una comprensión básica de jQuery y CSS 3. Huye si tienes miedo, o mejora las animación CSS y recursos para el aprendizaje de jQuery. Además, estas demos utilizan las funciones de WebKit específicas y se ven mejor en la última la versión de Safari, por lo que el rendimiento en otros navegadores pueden variar.)
A menudo vemos el diseño de un botón para hacer clic en un vínculo y mostrar su contenido. Nuestro primer demo nos muestra exactamente eso. Utiliza slideDown() del método de jQuery, como en muchos casos se hacen.
Pero ¿qué fuerza actúa sobre el <div> que provocó que se abriera? ¿Se pulsa el botón de desenganche de algún gancho imaginario? ¿Se activará una secuencia de desbloqueo con algunas marchas?

Toma 2

Nuestra segunda demo es más explícita sobre lo que sucede: el botón cae en el <div> y sacudió su contenido soltándolo. He aquí cómo se hace.

  1. function clickHandler(){
  2. $(‘#button’).addClass(‘animate’);
  3. return false;
  4. }

Al hacer clic en el enlace agrega una clase de animación (.animate) a nuestro botón. La clase tiene el siguiente CSS asociadas con el botón:

  1. <style>
  2. .animate {
  3. -webkit-animation-name: ANIMATE;
  4. -webkit-animation-duration: 0.25s;
  5. -webkit-animation-iteration-count: 1;
  6. -webkit-animation-timing-function: ease-in;
  7. }
  8. @-webkit-keyframes ANIMATE {
  9. from {
  10. top: 72px;
  11. }
  12. to {
  13. top: 112px;
  14. }
  15. }
  16. </style>

En nuestra definición del keyframe, hemos especificado los estados del from y el to. Esto es genial, porque podemos ser explícitos acerca de cómo un objeto inicia y termina su movimiento.
Estos keyframe CSS tiene acontecimientos que pueden reaccionar con JavaScript. En este ejemplo, estamos escuchando al evento webkitAnimationEnd y la apertura del <div> sólo cuando la secuencia se haya completado. Aquí está el código.

  1. function attachAnimationEventHandlers(){
  2. var wrap = document.getElementById(‘wrap’);
  3. wrap.addEventListener(‘webkitAnimationEnd’, function($e) {
  4. switch($e.animationName){
  5. case “ANIMATE” :
  6. openMain();
  7. break;
  8. default:
  9. }
  10. }, false);
  11. }
  12. function openMain(){
  13. $(‘#main .inner’).slideDown(‘slow’);
  14. }
  15. </script>

(Para obtener más información sobre el manejo de eventos de animación, echa un vistazo a la documentación en la Biblioteca de referencia de Safari.)

Toma 3

El problema con la demo anterior es que las sutilezas de momento no son evidentes. Todavía se siente un poco agitado.

Para nuestra tercera demo, vamos a utilizar porcentajes en lugar de palabras clave de modo que podemos insertar tantos puntos como necesitamos para comunicar un tiempo más realista. Los porcentajes nos permite agregar las claves a la animación a un tiempo muy oportuno: anticipar, retener, liberar, y la reacción.

  1. <style>
  2. @-webkit-keyframes ANIMATE {
  3. 0% {
  4. top: 72px;
  5. }
  6. 40% { /* anticipation */
  7. top: 57px;
  8. }
  9. 70% { /* hold */
  10. top: 56px;
  11. }
  12. 80% { /* release */
  13. top: 112px;
  14. }
  15. 100% { /* return */
  16. top: 72px;
  17. }
  18. }
  19. </style>

Toma 4

La animación del botón está comenzando a sentirse mucho mejor, pero la reacción para abrir el <div> parece un poco lento.

Esta cuarta demo utiliza un retraso jQuery (@delay()@) método para el tiempo de apertura, precisamente cuando lo necesitemos. Puesto que conocemos que la animación del botón es de un segundo y su reacción se inicia en el ochenta por ciento de eso, ponemos nuestro retraso en 800ms (ochenta por ciento de un segundo). Sin embargo, aquí tienes un pequeño consejo: vamos a iniciar la apertura en 750 ms. Los cincuenta milisegundos extra hacen que se sienta más como si la apertura fuera una reacción al golpe exacto del botón. En lugar de escuchar el evento webkitAnimationEnd, podemos comenzar la apertura tan pronto como se pulsa el botón, y el movimiento comienza en el plazo especificado.

  1. function clickHandler(){
  2. $(‘#button’).addClass(‘animate’);
  3. openMain();
  4. return false;
  5. }
  6. function openMain(){
  7. $(‘#main .inner’).delay(750).slideDown(‘slow’);
  8. }
  9. </script>

Toma 5

Podemos ajustar el tiempo de la animación anterior para siempre, pero eso es probablemente lo más cerca que llegaremos en la animación realista con CSS y JavaScript. Sin embargo, para darle un poco de sabor, podríamos relegar toda la animación de nuestro demo final a una secuencia de vídeo que incluye más matices y elementos adicionales para la distracción.
Aquí está la base de la sustitución de vídeo. Agregue un elemento <video> a la página y ajustar su opacidad a cero. Una vez que se pulsa el botón, se desvanecen en el botón y empieza a reproducirse el vídeo. Una vez que el vídeo termine, se desvanece y nos lleva al botón “Atrás”.

  1. function clickHandler(){
  2. if($(‘#main .inner’).is(‘:hidden’)){
  3. $(‘#button’).fadeTo(100, 0);
  4. $(‘#clickVideo’).fadeTo(100, 1, function(){
  5. var clickVideo = document.getElementById(‘clickVideo’);
  6. clickVideo.play();
  7. setTimeout(removeVideo, 2400);
  8. openMain();
  9. });
  10. }
  11. return false;
  12. }
  13. function removeVideo(){
  14. $(‘#button’).fadeTo(500, 1);
  15. $(‘#clickVideo’).fadeOut(‘slow’);
  16. }
  17. function openMain(){
  18. $(‘#main .inner’).delay(1100).slideDown(‘slow’);
  19. }

Terminando

No soy un experto en JavaScript. Pero estoy seguro de que muchos de ustedes por ahí podría escribir código mucho más limpio y más eficiente, pero espero que esto te da una idea de la teoría detrás de un movimiento más realista con la tecnología que más estamos usando. Este es sólo un modelo de animación para crear animaciones más convincente, pero se pueden crear innumerables variaciones de esta, incluyendo …
• Exportación de <video> animaciones con herramientas de animación en 3-D o 2-D como Flash o After Effects
• Usar <canvas> o SVG en lugar de <video>
• El empleo de Framworks  JavaScript para la animación
• Hacer uso de todas las poderosas propiedades de las CSS Transform y animación CSS
• Prueba las nuevas herramientas de animación CSS3 como Sencha Animator
Si no fuera ya evidente, estas demostraciones muestran un ejemplo exagerado, y probablemente no sean prácticos en muchos entornos. Sin embargo, hay un puñado de grandes sitios por ahí que hacen honor técnicas de animación- metáforas, la física y la distracción, entre otros- como Benjamin De Cock’s vCard, 20 Things I Learned About Browsers and the Web por Fantasy Interactive, y el sitio Nike Snowboarding por Ian Coyle y HEGA. Son testamentos maravilloso de lo que puedes hacer para ayudar a la interacción de los usuarios.
Mi objetivo era mostrar el “por qué” y el “cómo.” Su cargo es discernir el “dónde” y el “cuando”. ¡Animaciones felices!

About the author

Dan Mall

Dan Mall is an award-winning interactive art director and designer. He is an enthralled husband, Senior Designer at Big Spaceship, former Interactive Director at Happy Cog, technical editor for A List Apart, co-founder of Typedia, and singer/keyboard player for contemporary-Christian band Four24. Dan writes about design and other issues on Twitter and his industry-recognized site, danielmall.com.

Fuente Original: http://24ways.org/2010/real-animation-using-javascript-css3-and-html5-video

Traducción: Jazdian

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s