CSS3动画.translate3d与矩阵

我一直在做需要平滑过渡和动画的项目.我们最近几乎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示例(使用矩阵):

Famo.us示例(使用3D矩阵):

我的问题是...... translate3d和matrix有什么区别？使用matrix而不是translate3D是否有巨大的改进？是否有另一种方法可以产生更好的结果？

我对translate3D很满意,但是想学习任何方法都能提供最流畅的动画,并寻找可能的指导.

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

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

您询问matrix()和matrix3d()之间是否存在性能差异,答案是"有时".matrix3d()(或任何与3D相关的变换)通常会强制浏览器"分层"该元素(将其视为拍摄其像素的照片并将其存储在GPU上),然后由于像素分离,因此操作速度更快从屏幕的其余部分/图层'.通常,您会看到使用此技术的动画更流畅.然而,最初将图层化(将像素移动到GPU)的成本很小.

matrix3d()的另一个缺点是大多数浏览器捕获特定大小的像素(元素的自然大小),因此如果你向上扩展,事物看起来模糊或像素化.同样,这通常只有在你缩放UP时才有意义.哦,分层的东西会占用内存.如果超过GPU的内存,可能会降低速度.根据我的经验,这很少发生.

最新版本的GreenSock GSAP将自动使用最有可能提供最平滑结果的技术.如果你只是改变位置,它将使用translate3d().如果你缩放和移动,它将使用translate3d()和scale().如果你有任何旋转或倾斜,它将转移到matrix3d(),因为这是最快的.从版本1.15.0开始,它使用force3D:"auto",这意味着它将在补间期间使用3D来获得分层的好处,但是当动画结束时切换回2D以释放GPU内存.这是一个高度优化的系统.您也可以强制它使用您想要的任何技术.

在分析CSS和JS动画的性能时,我偶然发现了一些有趣的发现.我录制了一个您可能想要查看的截屏视频:http://greensock.com/css-performance/(请务必阅读评论).