CSS transform translate3d image анимация странное поведение сглаживания вызывает дрожание

У меня есть пример jsFiddle анимации изображения слева направо с использованием CSS3 translate3d, здесь: http://jsfiddle.net/Rhx2K/3/

У меня есть requestAnimationFrame, зацикливающийся на 60 кадров в секунду и устанавливающий левую позицию изображения 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 хорошо выглядела с приращением субпикселя?

0 ответов

Другие вопросы по тегам