使用 javascript 为 CSS3 转换的值设置动画是不是会排除硬件加速？

Posted 2023-03-06

【中文标题】使用 javascript 为 CSS3 转换的值设置动画是不是会排除硬件加速？

【英文标题】：Does animating the value of a CSS3 transform with javascript rule out hardware acceleration?使用 javascript 为 CSS3 转换的值设置动画是否会排除硬件加速？

【发布时间】：2012-02-05 17:24:30

【问题描述】：

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

如果您不设置动画持续时间和使用关键帧，而是直接使用 javascript 为所需的 CSS3 变换的值设置动画，该怎么办？您还会继续使用硬件加速，还是排除硬件加速？

【问题讨论】：

解析为什么jQuery方式比CSS慢：css3.bradshawenterprises.com/demos/speed.php。当块太多时，jQuery 版本甚至在我的双核 CPU 上都没有动画！

【参考方案1】：

除非您使用过渡，否则它不会为 webkit 浏览器进行硬件加速。此外，只有 3d 变换被加速，所以一个快速的方法来确保元素将使用 3d 渲染树（如果可用）是添加：

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

顺便说一下，转换之所以很快，是因为根据定义，它们不会影响任何其他元素 - 这意味着浏览器不需要重新绘制整个窗口，只需重新绘制正在转换的部分。

旧的动画制作方式确实应该被认为已经过时了，因为它的效率远低于过渡效果，而且通常帧速率较低，尤其是在 ios 上。

【讨论】：

那么，例如，如果不使用 transform3d: translate(0,0,0); 技巧，a skew 变换将不会被加速？

丰富的意思是transform: translate3d(0,0,0)。

我要强调的是，您所说的与 Webkit 有关。例如 Trident 加速一切，Gecko 中的加速也与 3D 变换无关。

@trusktr 是的，IE9 中重写了渲染引擎，所以整个渲染——<canvas> 绘图，<video> 解码，甚至是最基本的网站的渲染（自然包括-ms-transition 效果）在 IE10 中）是通过 GPU 完成的。是的，这很了不起，但它需要对渲染引擎进行大量更改，而且如果没有几个月的发现和消除错误是不可能的。

确实如此（这需要很多时间）。如果我正在制作浏览器，我会从一开始就着手做这件事。如今，几乎每个人都有硬件加速！目前，它似乎倒退了：使用软件加速实现的浏览器现在正在添加硬件加速支持。似乎应该首先是硬件加速，然后是没有 GPU/硬件的用户的软件回退。

【参考方案2】：

它是硬件加速的，但正如 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 级别。

【讨论】：

哇！！所以-webkit-transform: rotate3D(...) 的值是用javascript 动画的，但整个事情是用GPU 加速的？ top 或 left 这样的属性呢？我的印象是，如果您使用 javascript 为这些属性设置动画，除非您应用 transform: translate3d(0,0,0) 来触发 GPU 加速，否则它们不会被 GPU 加速。对吗？

不，即使你应用translate3d 然后用jquery 为left 设置动画，gpu 也不会启动。这里有一些测试用例：jsfiddle.net/zAgpd，区别在野生动物园。

老实说，我什至没有注意到我的计算机的性能有任何差异。他们似乎都表现得一样顺利。所以只是为了验证，#jqhardware 和 #hardware 都是硬件加速的？

Duopixel，我对这种级别的 (javascript) 编程很满意，但请告诉我：您的 jsfiddle 示例中的三个示例中哪一个是硬件加速的（通过 Webkit）？