animaciones anidadas utilizando tela y Javascript

Question

¿Son posibles las animaciones anidadas utilizando tela y Javascript? Por ejemplo, una mariposa agita sus alas mientras se mueve simultáneamente a lo largo de un camino.

¿Cuál sería la mejor manera de ir sobre la creación de este tipo de animación? Habrá múltiples instancias de la misma mariposa moviéndose en diferentes direcciones.

En el momento en que estoy dibujando la forma de mariposa en el lienzo, en dos partes, la izquierda y la derecha alas, que voy a animar por separado. Luego iré a animar a toda la mariposa en un camino.

Parece que habrá mucho procesamiento utilizado en los múltiples dibujos y animaciones, ¿podría guardarse usando un PNG en lugar de una forma, o incluso un GIF animado?

Cualquier consejo sería apreciado! ¡Gracias!

Answer 1

para responder a su primera pregunta: sí, son posibles. Para responder a su segunda pregunta, una 'mejor' manera sería utilizar el anidamiento arbitrario de transformaciones en el contexto canvas.

He creado un ejemplo que muestra cómo se puede emitir comandos de dibujo en el contexto sin tener idea de lo que es su transformación actual, y luego envolver esos comandos en las transformaciones que animan el resultado.

ver el resultado aquí: http://phrogz.net/tmp/canvas_nested_animations.html

Aquí es una descripción básica del enfoque:

// Draw a bug with animated legs 
function drawBug(){ 
    ctx.save(); 
    // Issue drawing commands, assuming some 0,0 center and an unrotated bug 
    // Use the current time, or some frame counter, to change how things are drawn 
    ctx.restore(); 
} 

// Move the (animated) bug around 
function drawMovingBug(){ 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 

    ctx.save(); 
    // Adjust the bug's location/rotation based on some animation path 
    // and the current time or frame counter. 
    var bugPosition = findCurrentBugPosition(); 
    ctx.rotate(bugPosition.angle); 
    ctx.translate(bugPosition.x,bugPosition.y); 

    // Draw the bug using the new transformation 
    drawBug();   
    ctx.restore(); 
}