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 хорошо выглядела с приращением субпикселя?