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

Question

我知道has been asked before，但我仍然不相信没有解决方法。我不相信的原因是我偶然设法在我的网站上保留了这些 gif 动画。我在此处的聊天中发布了此内容，并在@CarrieKendall 的帮助下提出了this fiddle。

这显然不是一个合适的解决方案，所以我想把它贴在这里让你们天才们挑选出来，并试图帮助我弄清楚如何解决这个问题（以一种最好不要占用太多资源的方式）？

更新：

好的，所以我对 jsfiddle 进行了更多修改，并提出了this：

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;
}

这很奇怪，但它确实有效。一个完全没有任何作用的动画。哦，我尝试用类似比例的东西替换翻译，但这并没有成功。这是这个奇怪的错误/解决方案的“最纯粹”的形式。

话虽如此，我还不太满意。如果比我更有知识的人可以看看这个并试图弄清楚真正发生了什么使这个解决方法......工作，我会喜欢它。希望这里有一些可以使用的东西，尽管是以更优雅的方式。

另外，我不知道像上述解决方法这样的资源密集型是多么的需要资源，所以如果有人可以帮助我衡量那将是非常棒的。

Answer 1

桌面浏览器不会出现相同的限制。这特定于 Apple 在其移动设备上的滚动实现。这是旧款移动设备的保留，以确保滚动保持流畅，因为早期的 iPhone 在整个操作系统中明智地使用了加速渲染。

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

不幸的是，由于苹果系统合成器的设计，确实没有“正确”的方式。事实上，随着 Apple 一直在对 iOS 进行更新，硬件加速和非加速的内容发生了变化。例如，在 iOS6 中，preserve3d 不再触发加速。据说，
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
应该仍然有效。就您而言，我相信它有效，因为您使用的是关键帧。

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

Answer 2

你试过 -webkit-transform-style: preserve-3d;, -webkit-transform: translate3d(0,0,0);或其他可能会在 iOS 设备上的动画 0% 和 100% 或 .link 类等中触发硬件加速的 CSS 选择器？

从另一个类似问题的答案中了解更多信息： - https://stackoverflow.com/a/10170170/1380685

.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://stackoverflow.com/a/25224086/1380685
• https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Using2Dand3DTransforms/Using2Dand3DTransforms.html