Исключает ли анимация значение преобразования CSS3 с помощью javascript аппаратное ускорение?

Question

Вы можете воспользоваться анимацией с аппаратным ускорением, установив продолжительность анимации и установив начальные и конечные значения преобразования CSS3.

Что если вместо настройки продолжительности анимации и использования ключевых кадров вы анимируетезначение нужного CSS3 преобразования напрямую с помощью JavaScript?Будете ли вы по-прежнему использовать аппаратное ускорение или аппаратное ускорение исключено?

Answer 1

Это не будет аппаратно ускорено для браузеров webkit, если вы не используете переходы. Кроме того, ускоряются только трехмерные преобразования, поэтому быстрый способ гарантировать, что элемент будет использовать дерево трехмерного рендеринга, если оно доступно, - добавить:

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

Между прочим, причина быстрых преобразований в том, что по определению они не влияют ни на какие другие элементы - это означает, что браузеру не нужно перерисовывать все окно, а только часть, которая преобразуется.

Старый способ анимации действительно следует считать устаревшим, поскольку он намного менее эффективен, чем переходы, и, как правило, имеет более низкую частоту кадров, особенно в iOS.

Answer 2

Это - аппаратное ускорение , но, как упоминает Рич, это проще и эффективнее делать с переходами CSS.Дело в том, что анимировать 3d-преобразования с помощью jQuery не так просто, если вы сделаете:

$('div').animate({
    '-vendor-transform' : "translate3d(100px,0,0)";
}, 500)

Это не работает.Даже если вы сделаете:

$('div').css("-webkit-transform", "translate3d(0,0,0)");
alert($('div').css("-webkit-transform"))

Вы не вернетесь translate3d(0,0,0), вы получите matrix(1, 0, 0, 1, 100, 0)

Так что вы должны написать множество пользовательских анимационных кодов, включающих матрицы, просто чтобы получитьвещи, движущиеся на экране.

Вот пользовательский пример анимированного трехмерного преобразования: http://www.eleqtriq.com/wp-content/static/demos/2010/rotation/, взгляните на исходный код, чтобы узнать, насколько вам удобен уровень JavaScript.