html5 gpu游戏,通过GPU来优化CSS 2D动画效果

电脑设备通过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%;

}

当鼠标滑过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);

}

注意：你需要为各个厂商的浏览器添加上前缀，还有这里我们将transition 的素材从all该为ileft来提高动画的性能。使用2D translate函数要比使用相对定位来移动图片的效果要好得多。

效果如右边的图像所示：

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

找到FPS Counter，点击enable来启用它。

重启Chrome浏览器。

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

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

@media only screen and (max-device-width: 1024px) {

div#vintage-racers img { transform: none; }

}