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

Question

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

我的第一个想法是让它成为GIF，但这会让你很难暂停并开始onclick事件（我确实找到了一个脚本，它使用html5从GIF中绘制一个静止帧来代替它）。

我可以把它变成MP4（h264）并使用html5视频...然后暂停和开始都是内置的，但这会产生更大的文件大小我不知道，我会遇到任何问题吗？移动？我知道移动设备上不支持很多背景视频，并且它会回到静态图片上......我对此有误吗？

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

Answer 1

您可以创建精灵图像（包含动画所有帧的图像），而不是通过操作来显示此图像的一部分，并使用js中的此图像进行剪裁。

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

在这种情况下，您将拥有对动画的所有控制权，以便您可以减慢速度，或者按照您的意愿暂停。