如何在iOS设备上滚动时保持动画GIF动画？ [英] How to keep animated gifs animated while scrolling on iOS devices?

问题描述

我知道这个之前已被问及但我仍然不相信没有解决方法。我不相信的原因是因为我偶然设法将这些GIF动画保存在我的网站上。我在这里的聊天中发布了这个，并且在@CarrieKendall的帮助下想出了这个小提琴。

I know this has been asked before but I'm still not convinced there's not a workaround. The reason I'm not convinced is because I managed to keep those gifs animated on a website of mine by accident. I posted this in the chat here and with help from @CarrieKendall came up with this fiddle.

这显然不是一个合适的解决方案，所以我想在这里发帖给你天才选择分开并试图帮我弄清楚如何解决这个问题（在一种最好不会太资源的方式）？

This is obviously not a proper solution so I wanted to post it here for you geniuses to pick apart and try to help me figure out how I can fix this problem (in a way that preferably is not too resource heavy)?

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

Ok, so I tinkered a bit more with the jsfiddle and came up with 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;
}

这很奇怪，但确实有效。绝对没有任何动画的动画。哦，我尝试用缩放比较替换翻译但是没有做到这一点。这是这种奇怪的错误/解决方案的最纯粹形式。

It's strange, but it works. An animation that does absolutely nothing. Oh and I tried replacing translate with something like scale but that didn't do the trick. This is the "purest" form of this weird bug/solution.

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

That said though, I'm not quite satisfied yet. I'd love it if someone more knowledgeable than me could have a look at this and try to figure what is REALLY going on that makes this workaround... work. Hopefully there's something in here that can be used, albeit in a more elegant way.

另外，我不知道像上面的解决方法那样资源密集程度如何，所以如果有人可以帮我衡量那个真棒。

Also, I have no idea how resource intensive something like the above workaround would be, so if someone could help me measure that that'd be awesome.

推荐答案

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

The same restrictions don't occur on a desktop browser. This is specific to the implementation of scrolling that Apple has on their mobile device. It's a hold-over from their older mobile devices to make sure scrolling stays smooth, as earlier iPhones made judicious use of accelerated rendering throughout their OS.

触发硬件加速会改变渲染页面的路径。在非加速页面中，浏览器直接渲染到屏幕纹理。滚动时，所有其他执行都将停止，因为平滑滚动渲染器控制渲染。这不仅限于GIF。如果javascript会改变页面内容，那么在页面完成滚动之前它也不会显示。

在加速页面中，加速对象实际上被发送到合成器。合成器将所有对象层放在正确的位置，然后创建一个复合纹理以放在屏幕上。滚动实际上是合成器工作的一部分，由于合成器负责从端到端渲染，动画将继续。

Triggering hardware acceleration changes the render path of the page. In a non-accelerated page, the browser renders directly to the onscreen texture. When scrolling, all other execution is stopped, because the smooth scroll renderer takes control of rendering. This is not limited to just GIFs. If javascript would have changed the page content, it would also not show until the page finished scrolling.
In an accelerated page, the accelerated objects are actually sent to the compositor. The compositor puts all the layers of objects in the right place, and then creates a composite texture to put on the screen. Scrolling is actually part of the compositor's job, and since the compositor is in charge of rendering from end-to-end, animations will continue.

不幸的是，由于设计Apple的系统合成器，真的没有'正确'的方式。事实上，由于Apple一直在对iOS进行更新，因此硬件加速的内容发生了变化，而不是。例如，在iOS6中，preserve3d不再触发加速。据说，

-webkit-backface-visibility：hidden;

-webkit-perspective：1000 ;

仍应有效。在您的情况下，我相信它是有效的，因为您使用的是关键帧。

Unfortunately, due to the design of Apple's system compositor, there is really no 'right' way. In fact, as Apple has been making updates to iOS, there have been changes to what is hardware accelerated, and what isn't. For example, in iOS6, preserve3d no longer triggered acceleration. Supposedly,
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
should still work. In your case, I believe it works because you are using keyframes.

在性能/资源影响方面，您的页面将不会使用任何其他加速的资源页。

In terms of performance/resource impact, your page won't use any more resources than any other accelerated page.

这篇关于如何在iOS设备上滚动时保持动画GIF动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！