【发布时间】：2016-12-09 13:26:19
【问题描述】：
我想制作一个有 2 个按钮的网页...单击按钮 1 时，“loading.gif”会播放，单击按钮 2 时，它会停止，但仍会显示图像。我希望这些活动具有 CPU 效率，即它们应该消耗更少的 CPU 周期。
到目前为止我尝试过的方法：
我从“loading.gif”捕获了一张静止图像，并在单击按钮 2 时，将 img.src 属性更改为“still.gif”。
我使用在线工具将“loading.gif”分割成单独的帧。单击按钮 1 时，我手动调用帧并将计时器设置为 100 毫秒。（即我手动制作动画）。而且，在单击按钮 2 时，我使用 clearTimeout() 清除了计时器。
我按照代码：Stopping GIF Animation Programmatically 它使用画布将静止图像绘制到加载图像上。所以，基本上“loading.gif”仍在屏幕上显示的静止图像后面播放，这将消耗更多的CPU周期。
- 我尝试使用 CSS 属性“animation-play-state:paused”和“animation-play-state:running”分别停止和播放 gif。但后来我发现 CSS 动画属性仅适用于帧或图像，不适用于 gif。
- 我在 jquery 代码中发现了人们使用的属性“animate:false”。有没有办法在 javascript 中使用该属性？ 我不想在我的代码中使用 jquery。
那么，有什么方法可以停止 gif，而不将 gif 转换为单独的帧，不使用 jquery，并且仍然保持 CPU 效率。
【问题讨论】：
标签： javascript animation