Opciones de animación HTML5 Canvas/CSS3/jQuery

Question

Estoy interesado en hacer algunas animaciones más flash en cualquiera, o una combinación de HTML5/JQuery.

Una de las ideas que flota es la de las aves voladoras, la animación de personajes y las secuencias de animación tipo 'tween'. Soy un desarrollador de flash por segundo plano, así que todo esto es natural gracias al sistema de interpolación de movimiento basado en la línea de tiempo de Flash, así que me pregunto qué es posible con las nuevas tecnologías emergentes como HTML5 Canvas, CSS3 y jQuery. ¿Qué tan expertos son estos entre tween como la animación? ¿Cuál es un buen punto de partida para leer?

Por ejemplo, las aves voladoras en http://www.thewildernessdowntown.com/ son increíbles, parecen ser 3d, dirección variable, velocidad, rotación, aleta, velocidad. In Flash podría lograr esto con relativa facilidad, creando animaciones de conjuntos como clips de película, generando estos en el escenario y moviéndolos en tweenlite a varias velocidades o incluso en PV3D pero no tengo ni idea de cómo se lograría esto en el lienzo .

En resumen, ideas sobre cómo se logró lo anterior, un buen material de lectura sobre este tipo de animación fuera de flash y cualquier sugerencia general que pueda tener sería muy apreciado.

Gracias

Answer 1

Tiene tres opciones de animación en "HTML5": Canvas, SVG y CSS Animations (así como buena animación de Javascript anterior). El que uses dependerá de lo que trates de lograr y de los navegadores en los que quieras que se ejecuten.

Si usted está tratando de apuntar móvil, por ejemplo, animaciones CSS son su única opción, porque la lona es demasiado lento en general, y Android no tenía SVG hasta el nido de abeja. Además, varias funciones de SVG aún no están habilitadas en iOS (por ejemplo, rutas de texto animadas).

Aquí es mi intro presentation to CSS animations y también una introducción a nuestra herramienta de Sencha animador, que está en alfa.

Para el escritorio Canvas es bastante impresionante, aunque solo funciona de manera excelente en Chrome 10 e IE9, Safari puede ser un poco lento, especialmente cuando el número de elementos animados sube y no existe en IE7/8 (y yo aún no he probado FF4).

Answer 2

se puede consultar processingjs que utiliza lienzo para las visualizaciones 2D y 3D. He hecho una pequeña visualización con processing js y es bastante fácil obtener buenos resultados.

La ventaja de usar processingjs es que su animación no solo se ejecutará en el navegador sino también en herramientas de procesamiento nativas.

Answer 3

Creo que las aves se han animado usando svg y algunos javascript para huir del mouse (porque todo el mundo sabe que los ratones pueden comer pájaros :)).

Creo que, en este "momento de transición", javascript/css3 podría ser muy útil para la animación simple a medida que algo aparece o se mueve de una manera u otra. También es un poco complicado usar animaciones ya que Mozilla y Opera solo admiten la transición de css3 y ninguna animación por momento.

Espere, todavía es posible hacer algunas animaciones difíciles, pero tendrá que jugar difícilmente con la transición de transformación y, a veces, transformar el origen. Usted puede tener algunas buenas informaciones allí: http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/

El punto bueno con SVG es esto se construye para ser animada más como una "animación flash Tradicional" y puede ser controlado por javascript y CSS3. Javascript se está volviendo cada vez más poderoso ya que todos los "buscadores modernos" están peleando en pruebas como la prueba de sunspider. Así que puedes hacer mucho con Javascript, creo que no pasará mucho tiempo hasta que un editor wysiwyg genere un código css3 limpio (creo que adobe está en camino ¿no?).

Por otro lado existen estas tecnologías requieren WebGL, lo que permite mediante el uso de canvas de HTML5 y algo de JavaScript seria para escribir aplicaciones 2D y 3D que le permiten hacer algunas cosas increíbles que puede usar el poder de la GPU.

Espero que te haya ayudado a ver a través de esas tecnologías emergentes.

Answer 4

Hay una pequeña demostración acerca de cómo escribir un campo estelar animada usando HTML5 y Javascript. Consulte el código de javascript en this page.

Answer 5

La animación de las aves se realiza utilizando un algoritmo llamado Boids. Boids es único ya que tiene un comportamiento de congregación/enjambre/escuela como lo que mejor hacen las aves y los peces.

• Es posible que desee echa un vistazo a la descripción de los Boids por el inventor Chris Reynolds: Chris Reynolds - Boids

• Aquí es un script en github que pueden ayudarle a: https://github.com/nuterian/Flocking

• Aquí es una demo: http://nuterian.github.io/Flocking/