当前位置主页 > 资料库 > 前端教程 > 通过GPU来优化CSS 2D动画效果

通过GPU来优化CSS 2D动画效果

01-15

电脑设备通过GPU来支持CSS 3D的转换线程。GPU是一个专门用于像素操作的电子设备。GPU通常用于处理游戏、本地应用程序和3D动画,而不是用于页面的2D transforms。当前的浏览器依靠CPU来支持2D动画,这会影响在所有平台下CSS动画的平滑性和流畅性,尤其是在移动设备上。

我们可以通过一些小技巧来使用将GPU使用在2D动画上。下面是一个例子,试试用鼠标移动到下面的图片上看看。

div#vintage-racers { 
    width: 33%; 
    position: relative; 
    overflow: hidden; 
    border: 2px solid #000; 
    font-size: 0; 
    height: 300px; 
}
div#vintage-racers img { 
    position: absolute; 
    left: 0; 
    transition: 1s all ease-in-out; 
}
div#vintage-racers:hover img { 
    left: -100%; 
}                               
                            
Vintage racers

当鼠标滑过div时图片开始移动,你会看到结果有一些延迟和画面抖动。为了制作平滑的动画效果,我们可以添加一个CSS 3D transform。这里的诀窍是在transform不会改变元素的外观,我们只是需要简单的包含3d transform来打开GPU功能,这将使得2D transition 也会被GPU影响。

div#vintage-racers img { 
    position: absolute; 
    left: 0; 
    transition: 1s left ease-in-out; 
    transform: translate3d(0,0,0); 
}                                
                            
Vintage racers

效果如右边的图像所示:

如果你的电脑足够好,你会看到第二种动画效果要比第一种动画效果要平滑顺畅得多。如果你想知道GPU是否在工作,Chrome有一个实验性的工具可以检测你的动画的性能,使用方法如下:

  1. 在Chrome的URL栏键入:about:flags
  2. 找到FPS Counter,点击enable来启用它。
  3. 重启Chrome浏览器。

在页面渲染时如果GPU被启用,浏览器上将会出现FPS计数器。你可以将代码中的3D transform移除掉看看FPS计数器是否还会出现。

这个技术的可能有利于移动设备上的小CSS动画。但是使用这个技术要注意,智能手机和平板电脑的显存都相对比较小,所以测试非常重要,如果你发现这个技术可以在桌面设备上很好的运行,而在移动设备上不行,你可以通过@media query来在移动设备上关闭它。

@media only screen and (max-device-width: 1024px) {
    div#vintage-racers img { transform: none; }
}                                
                            
Previous:
上一篇:更多关于CSS 3D属性的技巧-平滑转换和浮动元素
Next:
下一篇:浅谈CSS Resets重置样式表
返回顶部