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 和矩阵有什么区别？使用矩阵比 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/（请务必阅读 cmets）。

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

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

最明显的一个是从rotate(0deg) 到rotate(360deg) 的动画。两者的等效矩阵是相同的（显然）。您需要使用旋转设置变换，否则将不起作用。

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

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