CSS 3动画。 translate3d与矩阵

我一直在做需要平滑过渡和动画的项目。我们最近几乎100％的时间都从使用Javascript转换为CSS动画。CSS 3动画。 translate3d与矩阵

我发现使用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）。两者都表现出令人敬畏的帧率和惊人的性能。

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

使用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感到满意，但想要学习任何方法会给出最流畅的最佳动画并寻找可能的指导。

来源

2015-02-06 w3bMak3r

Nit是正确的 - 在大多数现实世界中，性能在translate3d（）和matrix3d（）之间无法区分。最终，所有变换都会在某个级别转换为矩阵，因为这是GPU渲染事物的方式（至少这是我的理解）。

矩阵（）和矩阵3d（）不仅包含位置数据，还包含旋转，缩放和倾斜。

您问过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/（一定要阅读评论）。

来源

2015-02-06 04:03:39 Jack

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

translate3d(dx, dy, dz)：

Sample image 1

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

Sample image 2

前者简直是唯一的运动元素，而后者则允许你指定整个矩阵的简写。由于它们都使用相同的基础结构，因此它们的性能几乎相同（对于类似规模的操作）。

来源

2015-02-06 00:59:16 Nit

是否有矩阵和的Matrix3D之间的性能差异？ – w3bMak3r 2015-02-06 01:23:30

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

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

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

但是，如果你只使用翻译，为您的标题所暗示的，这个东西是一个问题

来源

2015-02-06 16:40:14 vals

要说清楚的是，这只是当你谈论纯CSS的时候。尽管GSAP使用矩阵来应用变换，但由于其管理数据下的数据的方式，旋转到360度或720度或任何其他位置都不成问题。但你是对的 - 只有在CSS中定义矩阵才有这些限制。 – Jack 2015-02-07 01:13:45

CSS 3动画。 translate3d与矩阵

回答

相关问题