是否动画效果CSS3的值与JavaScript规则进行硬件加速的转换？ [英] Does animating the value of a CSS3 transform with javascript rule out hardware acceleration?

问题描述

您可以通过设置动画的持续时间并设置CSS3的初值和终值转化利用硬件加速的动画。

You can take advantage of hardware accelerated animations by setting an animation duration and setting the initial and final values of the CSS3 transform.

的如果，而不是设置一个动画持续时间和使用关键帧，设置动画所需要的CSS3的价值直接与JavaScript的转换？你还会被利用硬件加速的，或者是排除了硬件加速？

What if, instead of setting an animation duration and using keyframes, you animate the value of the desired CSS3 transform directly with JavaScript? Will you still be taking advantage of hardware acceleration, or is the hardware acceleration ruled out?

推荐答案

它的是硬件加速，但作为丰富提到，它更容易和更有效的使用CSS转换为做到这一点。问题是，动画3D变换使用jQuery并不简单，如果你这样做：

It is hardware accelerated, but as Rich mentions, it's easier and more efficient to do it with CSS transitions. The thing is that animating 3d transforms with jQuery is not straightforward, if you do:

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

这是行不通的。即使你做的：

It doesn't work. Even if you do:

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

您不回来 translate3d（0,0,0），你得到矩阵（1，0，0，1，100 ，0）

所以，你必须编写大量的自定义动画code涉及矩阵只是为了让事情动在屏幕上。

So you must write a lot of custom animation code involving matrices just to get things moving on screen.

下面是3D动画变换例如自定义：的http：// www.eleqtriq.com/wp-content/static/demos/2010/rotation/ ，看看源$ C ​​$ C，看它是否对你的舒适与JavaScript的水平。

Here is a custom animated 3d transform example: http://www.eleqtriq.com/wp-content/static/demos/2010/rotation/, take a look at the source code to see if it's the level of javascript you are comfortable with.

这篇关于是否动画效果CSS3的值与JavaScript规则进行硬件加速的转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！