为移动设备制作动画的最佳方式，您可以暂停和恢复 OnClick

Question

我正在制作一个动画留声机，它会播放音乐并在点击时自行制作动画，然后在再次点击时停止。这样做的最佳方法是什么？

我的第一个想法是将其制作为 GIF，但这会导致很难暂停和启动 onclick 事件（我确实找到了一个使用 html5 从 GIF 中绘制静止帧来代替它的脚本）。

我可以将它制作成 MP4 (h264) 并使用 html5 视频...然后暂停和开始都是内置的，但这会使文件大小更大，我不知道，我会遇到任何问题移动的？我知道很多背景视频在移动设备上不受支持，并且会退回到静态图片上……我错了吗？

我可以使用 Adob​​e Animate 将其导出为 javascript 动画并在 HTML5 画布上使用。这会有兼容性问题吗？ HTML5 画布动画能否轻松暂停和恢复？

Answer 1

您可以创建精灵图像（包含动画所有帧的图像），然后您可以通过从 js 中对该图像的位置和剪辑进行操作来显示该图像的某些部分。

您也可以为每一帧创建css条目作为背景，而不是在js中定期更改某些元素的类。

在这种情况下，您将拥有对动画的所有控制权，因此您可以放慢速度，或随意暂停。