使用javascript动画CSS3变换的值是否可以排除硬件加速？

Question

您可以通过设置动画持续时间并设置CSS3变换的初始值和最终值来利用硬件加速动画.

如果您不是设置动画持续时间并使用关键帧,而是使用JavaScript直接设置所需CSS3变换的值,该怎么办？你还会利用硬件加速,还是硬件加速被排除？

Answer 1

它是硬件加速的，但正如 Rich 提到的，使用 CSS 转换更容易、更高效。问题是，如果您这样做，使用 jQuery 制作 3D 变换动画并不简单：

$('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)

因此，您必须编写大量涉及矩阵的自定义动画代码，才能使屏幕上的内容移动。

这是一个自定义动画 3D 变换示例：http://www.eleqtriq.com/wp-content/static/demos/2010/rotation/，查看源代码，看看它是否是您满意的 JavaScript 级别和。