3

我有一个使用 CSS3 translate3d 从左到右动画的图像的 jsFiddle 示例，这里：http: //jsfiddle.net/Rhx2K/3/

我有一个 requestAnimationFrame 循环 60fps 并以亚像素间隔在每一帧上设置 JPG 图像的左侧位置。

var image1 = document.getElementById('image1');
var image2 = document.getElementById('image2');

var image1Left = 0;
var image2Left = 0;
var subpixel   = 1 / 64;

var _run = function(){
    window.requestAnimFrame(_run);
    image1Left += subpixel * 5;
    image2Left += subpixel;
    image1.style.webkitTransform  = 'translate3d('+image1Left+'px, 0px, 0px)';
    image2.style.webkitTransform  = 'translate3d('+image2Left+'px, 0px, 0px)';
}

_run();

我在示例中放置了两张图片。他们都在做同样的事情，只是顶部的移动得更快。注意它是如何产生这种阶梯效应的。图像本身在亚像素级别进行转换。注意图像是如何以恒定速率移动的——你可以看到树木似乎在滑行，但左右两侧都在抖动。经过实验，我意识到离像素越远抗锯齿效果越好。例如左边：1px，没有抗锯齿，但左边：1.2px，有一些，然后左边：1.5px还有更多。左边：1.7px 少，然后在 2px，没有。所以这里的摆动是由于每个子像素步骤的相对抗锯齿。如果它没有引起这种抖动，这将是有意义的。

在转换上使用 webkit 转换时也会发生这种情况。 http://jsfiddle.net/Rhx2K/5/

这是标准行为吗？这似乎是 webkit 本身的一个错误。

我的解决方法是仅按像素值设置动画，如下所示：http: //cmivfx.com/home

使用像素值（相对于子像素值），不会向图像添加抗锯齿，因此动画看起来非常流畅......我唯一的问题是全像素增量会导致图像移动得太快。我需要亚像素增量来减慢动画速度。

这些我都试过了......

-webkit-transform: translate3d(0, 0, 0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

这些都不是答案。如何让 translate3d 动画在亚像素增量上看起来不错？

4

0 回答 0