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有什么区别？使用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/（请务必阅读评论）。

Answer 2

核心，translate3d()和matrix3d()都是矩阵变换。

translate3d(dx, dy, dz)：

matrix3d(a1, a2, a3, a4, b1, b2, b3, b4, c1, c2, c3, c4, d1, d2, d3, d4)：

前者只是移动元素的简写，而后者允许您指定整个矩阵。由于它们都使用相同的底层结构，因此它们的性能几乎相同（对于相似规模的操作）。

Answer 3

您必须考虑的另一件事是，动画矩阵不会为您提供动画转换的所有选项，特别是在您设置旋转时。

最明显的一个是从旋转（0度）到旋转（360度）的动画。两者的等价矩阵是相同的（显然）。您需要使用旋转设置变换，否则它将无法正常工作。

在复杂变换中，通常使用矩阵设置变换不会为您提供所期望的动画。

但是，如果你只使用翻译，正如你的标题所暗示的那样，任何问题都是一个问题