CSS 3动画。translate3d对矩阵

Question

我一直在做需要平稳过渡和动画的项目。我们最近已经从使用Javascript迁移到CSS动画几乎100%的时间。

我发现使用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和矩阵有什么区别？使用矩阵是否比translate3D有很大的改进？还有别的方法能产生更好的效果吗？

我一直对translate3D很满意，但我想学习任何方法将提供最流畅的最好的动画，并寻求指导什么可能。

Answer 1

Nit是正确的--在大多数现实世界中，性能在translate3d()和matrix3d()之间是无法区分的。最终，所有转换都会在某种程度上转换为一个矩阵，因为GPU就是这样呈现事物的(至少这是我的理解)。

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

您询问了矩阵()和matrix3d()之间是否存在性能差异，答案是“有时”。matrix3d() (或任何与3D相关的转换)通常迫使浏览器“分层”该元素(将其想象为拍摄其像素的照片并将其存储在GPU上)，这样操作起来更快，因为它的像素与屏幕的其余部分/层分离‘。通常，您将看到更流畅的动画使用这一技术。然而，最初将一些东西分层(将像素转移到GPU)有很小的成本。

matrix3d()的另一个缺点是，大多数浏览器都以特定大小(元素的自然大小)捕获像素，因此，如果您将其放大，事情就会变得模糊或像素化。同样，只有在向上扩展时，这通常才会起作用。哦，把东西分层会占用你的记忆。如果你超过了GPU的内存，它会减慢速度。但在我的经验中，这种情况很少发生。

最近版本的GreenSock的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

另一件事，你必须考虑的是动画矩阵不会给你所有的选项，你有动画转换，特别是如果你设置旋转。

最明显的是动画从旋转(0deg)到旋转(360 0deg)。两者的等价矩阵是相同的(很明显)。您需要使用旋转设置转换，否则它将无法工作。

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

但是，如果您只使用翻译，正如您的标题所暗示的，这方面的任何事情都是一个问题。