2

我想在画布上显示一个动画 gif，并应用了一些转换。为了进行测试，我目前只是尝试在画布上显示动画 gif，因此它本质上等同于将 gif 显示为常规<img>标签。

我正在使用 Chrome 和webkitRequestAnimationFrame. 在每个请求帧上，我都会绘制图像。当 gif 帧发生变化时，这应该反映在画布上。这仅部分有效：

  • 仅仅看画布并不能让它更新。相反，开始绘制一个静止的帧。
  • 重新选择选项卡（即选择另一个选项卡并再次选择画布选项卡）确实会将其更新为新框架，但之后它会再次冻结。

这是我设置的小提琴：http: //jsfiddle.net/eGjak/93/。

如何在画布上绘制动画 gif并使其实际动画化？

4

1 回答 1

3

答案不再有效

看起来这里描述的行为（将img引用动画 gif 的标签写入画布会导致写入 gif 的不同帧，如果它img是 DOM 的一部分或可见）至少在 Chrome 中发生了变化。可能有也可能没有关于什么是正确行为的文档。:)

此外，webkitRequestAnimationFrame不再具有采用额外参数的行为，即元素 X，这样当 X 不可见时，请求的函数将不会运行。出于性能和电池寿命的原因，您可能希望传递给的许多函数requestAnimationFrame在执行任何需要绘图的操作之前检查可见性。

前：

查看固定版本：

http://jsfiddle.net/eGjak/96/

如果您将 a 添加console.log()到绘制图像的函数中，您将看到它正在被调用。问题似乎是图像本身没有动画，可能是因为浏览器不会费心更新不属于 DOM 的动画图像。

我的解决方案是使动画 gif 成为 DOM 的一部分，大小为 0，它工作得很好。

您可以通过加载http://jsfiddle.net/eGjak/96/show/并在 Windows 或 Linux 上使用 ctrl-shift-I 检查元素来验证动画是否显示在画布上而不是图像标签中/ alt-cmd-我。

编辑：这是一个奖金！

webkitRequestAnimationFrame比 Mozilla 等价的参数多一个参数，以允许您的动画仅在正在动画的元素可见时运行。查看

http://jsfiddle.net/kmKZa/8/

并打开控制台。您会看到，当您隐藏画布时，动画函数将停止调用。当您再次切换可见的画布时，将再次调用动画函数。

于 2011-09-02T12:37:37.653 回答