因此,今天我仔细研究了如何使用GPU处理flickr并跟踪(重绘)CSS3过渡 。 屏幕截图显示了CSS3比例重绘,在chrome上留下了痕迹。 然后,在后面的文章中快速浏览一些CSS3控件属性。
硬件加速
硬件加速是浏览器整体渲染性能的重要里程碑。 一般方案是将原本由主CPU计算的任务卸载到计算机图形适配器中的图形处理单元(GPU)。 这样可以大大提高性能,还可以减少移动设备上的资源消耗。
帧率。
没有踪迹。?!?
重排/重涂
可能的结果是,在屏幕上进行动画处理的对象在发生动画时不需要页面的单个“重新布局”。 由于CSS过渡由浏览器管理,因此可以大大提高其动画的保真度,并且在许多情况下可以加速硬件。
在开发工具中重画。
仅重涂。
FPS柜台
为此,只需在Chrome中输入“ chrome:flags”,向下滚动至FPS计数器,然后启用它,然后点击屏幕底部的立即重新启动按钮即可。 启用它之后,您应该能够看到窗口左上角显示的FPS速率,表明该页面确实是GPU加速的。
那么我们使用Scale还是Scale3d?
参见scale与scale3d的示例: https ://jsfiddle.net/Hw6AM/2/
开发工具中的Scale3D框架。
三次贝塞尔曲线和时序函数
对于3D动画,贝塞尔曲线通常用于定义3D路径以及用于关键帧插值的2D曲线。 本质上是缓动函数,它通过设置从比率得出的固定css坐标点来控制动画的速度。
-webkit-transition: -webkit-transform 0.2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
-ms-transition: -ms-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
与上面的示例相同,但是速度曲线是使用三次贝塞尔函数指定的:
-webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-ms-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
有关计时功能的更多信息,请参见Mozila计时功能。
定时功能–更多示例
煎饼定理! 令人惊叹的CSS3过渡效果竞速(悬停在轨迹上方)
CSS3过渡控件属性
让我们看一下CSS3过渡控件的一些属性以及使用它们的任何限制。
-webkit-backface-visibility: hidden;
有用,请注意,Chrome默认将背面显示为可见。 阅读有关CSS技巧背面可见性的更多信息 。
-webkit-perspective: 1000;
效果不太好,仅受Chrome和Safari支持。 阅读有关W3 CSS3透视图的更多信息。
-webkit-font-smoothing: subpixel-antialiased;
对于那些正在开发以野生动物园为目标的人很有趣。 阅读有关maxvoltar字体平滑的更多信息。
-webkit-transform-style: preserve-3d;
酷效果查看转换样式演示 。
useTranslate3d: true;
谷歌表示:“将useTranslate3d选项设置为true,以使iDevices上的动画更流畅(硬件加速)。” 阅读更多关于CSS Animatable Properties的信息 。