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) and 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

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

translate3d(dx, dy, dz):

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

前者只是一个仅移动元素的shorthand，而后者允许您指定整个矩阵。由于它们都使用相同的底层结构，因此它们的性能将是 near-identical（对于类似规模的操作）。

Answer 2

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

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

您问 matrix() 和 matrix3d() 之间是否存在性能差异，答案是 "sometimes"。 matrix3d() （或任何与 3D 相关的变换）通常会强制浏览器 "layerize" 该元素（可以把它想象成拍摄其像素的照片并将它们存储在 GPU 上），这样操作起来会更快，因为它的像素与屏幕的其余部分分开's/layers'。通常，使用此技术您会看到更流畅的动画。然而，最初对某些东西进行分层（将像素传送到 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 3

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

最明显的一个是从旋转（0 度）到旋转（360 度）的动画。两者的等效矩阵是相同的（显然）。你需要用旋转来设置变换，否则它不会起作用。

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

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

CSS 3 个动画。 translate3d 与矩阵

CSS 3 Animations. translate3d versus matrix

css

css-transforms

css-animations

translate3d