我发现使用translate3d可以在移动设备和桌面设备上提供非常流畅的动画效果.
我目前的动画风格是这样的：
CSS：
.animation-up{
transform: translate3d(0,-100%,0);
}
.animation-down{
transform: translate3d(0,100%,0);
}
.animation-left{
tranform: translate3d(-100%,0);
}
.animation-right{
tranform: translate3d(-100%,0);
}
最近,我开始研究不同的框架,这些框架似乎得到了很多关注.两个特定的GreenSock(http://greensock.com/tweenmax)和Famo.us(http://famo.us).两者都显示出令人敬畏的帧率和惊人的性能.
我注意到他们正在使用马蒂克斯变换.
Greensock示例(使用矩阵)：
<div class="Box green" style="transform: matrix(1,1,100);"></div>
Famo.us示例(使用3D矩阵)：
<div class="famous-surface" style="transform-origin: 0% 0% 0px; transform: matrix3d(1,149,385,1);"></div>
我的问题是…… translate3d和matrix有什么区别？使用matrix而不是translate3D是否有巨大的改进？是否有另一种方法可以产生更好的结果？
我对translate3D很满意,但是想学习任何方法都能提供最流畅的动画,并寻找可能的指导.
解决方法
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/(请务必阅读评论).
