CSS 3 动画。 translate3d 与矩阵

Question

我一直在做需要平滑过渡和动画的元素。我们最近几乎 100% 的时间都从使用 Javascript 迁移到 CSS 动画。

我发现使用 translate3d 可以在移动设备和桌面设备上提供非常流畅漂亮的动画。

我目前的动画风格是这样的:

CSS:

.animation-up{
     transform: translate3d(0, -100%, 0);
 }

.animation-down{
     transform: translate3d(0, 100%, 0);
 }

.animation-left{
     tranform: translate3d(-100%, 0, 0);
 }

.animation-right{
     tranform: translate3d(-100%, 0, 0);
 }

最近，我开始研究似乎引起广泛关注的不同框架。在特定的 GreenSock ( http://greensock.com/tweenmax ) 和 Famo.us ( http://famo.us ) 中有两个。两者都显示出惊人的帧速率和惊人的性能。

我注意到他们正在使用矩阵变换。

Greensock 示例(使用矩阵):

<div class="box green" style="transform: matrix(1, 0, 0, 1, 0, 100);"></div>

Famo.us 示例(使用 3D 矩阵):

<div class="famous-surface" style="transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 149, 385, 0, 1);"></div>

我的问题是... translate3d 和 matrix 有什么区别？使用矩阵比 translate3D 有很大的改进吗？还有其他方法可以产生更好的结果吗？

我对 translate3D 很满意，但我想了解任何可以提供最流畅的最佳动画的方法，并寻求有关可能的指导。

Answer 1

Nit 是正确的 - 在大多数真实场景中，translate3d() 和 matrix3d() 之间的性能无法区分。最终，所有变换都会在某种程度上转换为矩阵，因为这就是 GPU 渲染事物的方式(至少这是我的理解)。

matrix() 和 matrix3d() 不仅包含位置数据，还包含旋转、缩放和倾斜。

您询问 matrix() 和 matrix3d() 之间是否存在性能差异，答案是“有时”。 matrix3d() (或任何与 3D 相关的变换)通常会强制浏览器对该元素进行“分层”(可以将其视为为其像素拍照并将其存储在 GPU 上)，这样操作起来会更快，因为它的像素是分开的来自屏幕/图层的其余部分。通常，使用此技术您会看到更流畅的动画。然而，最初对某些东西进行分层(将像素传送到 GPU)的成本很小。

matrix3d() 的另一个缺点是大多数浏览器以特定大小(元素的自然大小)捕获像素，因此如果您将其放大，看起来会模糊或像素化。同样，这通常只有在您要UP 时才有意义。哦，对某些东西进行分层会占用内存。如果超过 GPU 的内存，它会减慢速度。根据我的经验，这很少发生。

GreenSock's GSAP 的最新版本将自动使用最有可能提供最平滑结果的技术。如果您只是改变位置，它将使用 translate3d()。如果缩放和移动，它将使用 translate3d() 和 scale()。如果你有任何旋转或倾斜，它会转移到 matrix3d() 因为这是最快的。从版本 1.15.0 开始，它使用 force3D:"auto"，这意味着它将在补间期间使用 3D 以获得分层的好处，但在动画结束时切换回 2D 以释放 GPU 内存。这是一个高度优化的系统。您也可以强制它使用您想要的任何技术。

我在分析 CSS 和 JS 动画的性能时偶然发现了一些有趣的发现。我录制了一个您可能想查看的截屏视频:http://greensock.com/css-performance/ (一定要阅读评论)。