使用画布和javascript嵌套动画

Question

使用canvas和javascript嵌套动画是否可行？例如，一只蝴蝶拍动翅膀，同时沿着一条路径移动。

什么是创建这种动画的最佳方式？将有多个相同的蝴蝶在不同的方向移动。

当时我在画布上绘制蝴蝶形状，分两部分，左右两翼，我将分别进行动画处理。然后我会沿着一条路径去动画整只蝴蝶。

看起来好像在多个图形和动画中会使用很多处理，可以通过使用PNG而不是形状，甚至是动画GIF来保存吗？

任何意见将不胜感激！谢谢！

Answer 1

要回答你的第一个问题：是的，他们是可能的。要回答你的第二个问题：一个“最好”的方法是在画布上下文中使用任意的变换嵌套。

我创建了一个示例，显示如何在上下文中发出绘图命令，但不知道当前的转换是什么，然后将这些命令包装在为结果生成动画的转换中。

在这里看到的结果：http://phrogz.net/tmp/canvas_nested_animations.html

下面是该办法的一个基本概述：

// 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(); 
}