如何在iOS设备上滚动时保持动画gif的动画效果？

Question

我知道这个问题已经被问过了，但我仍然不相信没有解决方法。我不相信的原因是我无意中成功地让我的一个网站上的这些gif动画了。我在这里的聊天中发布了这个问题，并在@CarrieKendall的帮助下想出了这个演示。

显然，这不是一个合适的解决方案，所以我想在这里发布它，让你们这些天才来分析并帮助我找出如何解决这个问题（最好不要太耗费资源）？

更新：

好的，我对jsfiddle进行了更多的调整，得出了这个:

HTML

<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">

CSS

@-webkit-keyframes WIGGLE {
  0%   { -webkit-transform: translate(0px, 0px); }
  100%   { -webkit-transform: translate(0px, 0px); }
}

keyframes WIGGLE {
  0%   { -webkit-transform: translate(0px, 0px); }
  100%   { -webkit-transform: translate(0px, 0px); }
}

.link{
  -webkit-animation: WIGGLE 1ms; 
          animation: WIGGLE 1ms;
}

很奇怪，但它却起作用。一个什么都不做的动画。哦，我尝试用scale替换translate，但那行不通。这是这个奇怪的错误/解决方案的“最纯粹”形式。

话虽如此，我还不太满意。我希望比我更有知识的人能看看这个，并尝试弄清楚这个解决方法背后真正发生了什么。希望这里有一些可以使用的东西，尽管用法可能更加优雅。

此外，我不知道像上面这样的解决方法会消耗多少资源，所以如果有人能帮我测量一下，那就太棒了。

- gburning

---

这个问题不适合在Apple.StackExchange.com上提问，那些指引你去那里的人是错误的。AD不涉及软件开发。 - Rob

Answer 1

在桌面浏览器上没有相同的限制。这是特定于苹果移动设备滚动实现的。这是从早期iPhone开始使用加速渲染技术，以确保滚动保持平稳的遗留问题。

触发硬件加速会改变页面的渲染路径。在非加速页面中，浏览器直接呈现到屏幕纹理上。在滚动时，所有其他执行都会停止，因为平滑滚动渲染器控制着渲染过程。这不仅限于GIF。如果javascript更改了页面内容，则也不会显示，直到页面完成滚动。
在加速页面中，加速对象实际上被发送到合成器。合成器将所有对象图层放置在正确位置，然后创建一个合成纹理放在屏幕上。滚动实际上是合成器的工作的一部分，由于合成器负责从端到端的渲染，因此动画将继续播放。

不幸的是，由于苹果系统合成器的设计，真正没有“正确”的方法。事实上，随着苹果对iOS进行更新，哪些内容可以进行硬件加速和哪些不能进行硬件加速也在不断变化。例如，在iOS6中，preserve3d不再触发加速。据说，
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
仍然可以使用。在您的情况下，我相信它能够正常工作，因为您正在使用关键帧。

就性能/资源影响而言，您的页面不会比任何其他加速页面使用更多资源。

- joe

---

谢谢！你写的内容与我自从开始研究这个以来所学到的知识相符。了解更多关于这一切“幕后”的东西是很好的。这让我对在我的网站上使用这个黑客技巧感到不那么不安。 - gburning

Answer 2

Have you tried -webkit-transform-style: preserve-3d;, -webkit-transform: translate3d(0,0,0); or other CSS selectors that might trigger hardware acceleration in your animations 0% and 100% or in the .link class etc... on the iOS device?

从另一个类似问题的答案中阅读更多： - https://dev59.com/_Gkw5IYBdhLWcg3wkLQX#10170170

.link{
  -webkit-animation: WIGGLE 1ms; 
          animation: WIGGLE 1ms;

  -webkit-transform-style: preserve-3d;
  -webkit-transform: translate3d(0,0,0);
}

解决方法是给包含滚动元素的整个容器设置“position:relative; z-index:1000;display:block”CSS属性，而不需要给子元素设置translate3d属性。

• http://en.kuma-de.com/blog/2011-12-26/494
• http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
• http://cantina.co/thought_leadership/ios-5-native-scrolling-grins-and-gothcas/

看起来其他人也遇到了这个问题:

• http://en.kuma-de.com/blog/2011-12-26/494
• -webkit-animation stops when scrolling on mobile safari

如果可以的话，您可以使用以下老式技术，以更少的资源密集操作使动画持续存在

您始终可以在初始加载的CSS文件中使用Base64编码的资源技术。

我最近发布了另一个相关问题的帖子。这样，动画就是连续的，并且通过css进行轻松快速的预加载和缓存。此外，您可以使用SVG、PNF、JPG和许多其他图像格式进行缩放和重新调整大小。

请阅读下面链接中发布的信息以了解更多信息。

• https://dev59.com/iGAf5IYBdhLWcg3wbSQh#25224086
• https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Using2Dand3DTransforms/Using2Dand3DTransforms.html

- Frankie Loscavio

---

虽然您提供了一些有趣的资源，但我并不确定这是否回答了任何问题。不过，感谢您提供这些资源。 - Carrie Kendall

感谢您提供如此深入研究的答案！按照您的建议，仅应用preserve3d和translate3d（不使用动画）就可以工作了！所以我想这与触发硬件加速有关。虽然我不能说我理解了它，但在我的手机上似乎运行得很好，所以我想应该没问题。至于您提到的Base64建议，我认为我不能使用它，因为我的图像是通过php加载的（每个实例的图像都不同）。 - gburning

如果这个答案对你有用，是否可以接受我的回答？同时感谢之前的评论。 - Frankie Loscavio

我选择接受Joe的答案，因为它更相关于我的原始问题。虽然我非常感激你的回答（因为它给了我一个稍微更简洁的解决方案），所以我决定授予你赏金。 - gburning