Question

我有一个jsFiddle示例，使用CSS3 translate3d从左到右制作动画，在这里：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

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

我已经尝试了所有这些....

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

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

CSS转换translate3d图像动画奇怪的抗锯齿行为会导致抖动

0 个答案: