Question

我正在尝试使用webkit动画应用简单的降雨效果，在ipad 2上它运行正常没有问题，但在较新的视网膜显示ipads上运行非常缓慢：

.rain{
width:100%;height:100%;
background-image:url('rain.png'),url('rain3.png'),url('rain2.png');
-webkit-animation:rain 1.5s linear infinite}
@-webkit-keyframes rain{0%{background-position:0 0}100%{background-position:900px     1000px,400px 400px,300px 300px}
}

我已经看到过使用3d变换来触发ios中的硬件加速，但是当直接将它们应用到这个类时动画停止了，我甚至不确定这些是否会产生影响。

-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
-webkit-transform: translate3d(1);
-webkit-transform: scale3d(1);

我知道这个问题可能与iOS Webkit animation performance suffers only on retina display重复，但很久以前就被问过但没有真正的结论。

这个问题有解决办法吗？或者任何可以提高性能的东西？

Answer 1

雨是图像视网膜吗？没看到，背景大小的标签，我认为它们不是。这意味着webkit必须对每个图像进行反锯齿，并且由于抗锯齿图像未被缓存，因此必须连续重新进行抗锯齿处理。尝试加倍图像的分辨率并使用background-size属性。

ipad视网膜显示webkit动画表现不佳

1 个答案: