使用CSS3实现60FPS动画

使用动画在移动应用程序中很容易的。如果您遵循我们的建议，移动应用程序中使用动画变得很简单。

虽然现在很多人在移动应用程序中使用CSS3 Animation来制作动画，当然很多人也不这么做。很多最佳实践，还是不断的被忽视。出现这种情况主要是因为仍有许多人并不真正了解这些最佳实践存在的真正原因，因此没有大力的支持。

面对这么多的终端设备，如果不考虑优化你的代码，你最终将会交付一个水平一般的效果，从而失去一份最高份额的市场占有率。

这篇文章我们想给你提供一个正确利用和使用CSS3的特性，这样做我们首先需要了解一些事情。

理解时间轴

什么是浏览器的渲染?这个非常简单的时间称为关键渲染路径(Critical Rendering Path)。

实现平滑的动画，我们需要关注于改变属性影响合成的步骤，而不是在前一层添加这个压力。

Style

浏览器开始计算应用中的元素样式——重新计算样式风格。

Layout

接下来的一层，浏览器会为这些元素生成形状和位置——布局。浏览器会给页面设置属性，比如width、height以及margin、left、top、right和bottom等。

Paint

浏览器将开始给每个元素填充像素。它们使用属性有：box-shadow、border-radius、color、background-color等。

Composite

浏览器开始在屏幕中绘制这些图层(Layout)。

现代浏览器可以利用transform和opacity绘制很好的动画，其中共有四个让动画更好的属性：

• 位置(Position)：transform: translateX(n) translateY(n) translateZ(n)
• 缩放(Scale): transform: scale(n)
• 旋转(Rotation): transform: rotate(ndeg)
• 透明度(Opacity): opacity: n

如何实现每秒60FPS

考虑到这一点，是时候撸起袖子开始工作了。

让我们先从HTML开始，我们创建一个非常简单的结构和布局并且将app-menu类放在layout类里。

<div class="layout">
    <div class=”app-menu”></div>
    <div class=”header”></div>
</div>

错误之处

.app-menu {
  
    left: -300px;
    transition: left 300ms linear;
}

.app-menu-open .app-menu {
  
    left: 0px;
    transition: left 300ms linear;
}

看到这些属性改变了吗？你应该避免在动画中使用left、top、right和bottom这四个属性。这些属性并不能帮我们创建一个流体动画，因为浏览器每次都会创建布局(重排),而且还会影响到他们的后代元素。

最终效果像这样：