使用canvas和javascript实现嵌套动画

Question

使用canvas和javascript是否可以实现嵌套动画？例如，蝴蝶在沿路径移动的同时扇动翅膀。

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

目前，我正在canvas上绘制蝴蝶的形状，分为左右两个部分，我将分别对其进行动画处理。然后我将在路径上对整个蝴蝶进行动画处理。

看起来似乎会使用大量处理来进行多次绘图和动画，可以使用PNG代替形状，甚至使用动态GIF节省吗？

如果您有任何建议，请告诉我！谢谢！

- frontendbeast

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

- Phrogz

---

是的，使用内置的转换堆栈是一个不错的选择。 - DuckMaestro

非常感谢，这正是我想知道的！我会试一试的！:D - frontendbeast

@Phrogz，我可以在drawMovingBug方法中先放置translate命令，然后再放置rotate命令吗？这样做是否会达到与之前相同的效果？ - Rajkamal Subramanian

@rajkamal 试一试吧！自我探索比问答更能让你学到更多。 - Phrogz

发现它们是不同的。放了一个 fiddle http://jsfiddle.net/Fcd7Y/。如果我在旋转后进行翻译...那么物体将相对于倾斜轴进行平移。如果我在旋转之前进行平移，物体将沿着正常轴移动。我已经在 fiddle 中使用了您的图像。如果这会冒犯您，请告诉我。 - Rajkamal Subramanian

@rajkamal 没问题使用我的图片，但感谢您的询问。是的，您已经发现变换的顺序绝对会产生影响。事实上，您甚至可以旋转、平移、旋转，然后再次平移。 :) - Phrogz