运行时性能的应用科学

去年年底，我构建了 Chrome 开发者峰会网站。我希望它具有 Material Design 的外观和风格，因为它是一种很棒的设计语言，而且我觉得它非常适合我想要创建的网站类型。但是，与任何新的设计语言一样，也存在一些问题、挑战和决策，尤其是在处理网络惯例时更是如此。

制作这个网站时特别具有挑战性的一个方面是，点击卡片时的“包版”效果。

想要以 60fps 的帧速率实现这样的效果，我们需要进行一些思考、进行原型设计和一些有趣的折衷。在 Chrome 开发者峰会上，我谈到了这种效果，并详细解释了我是如何构建这种效果的。

制作高性能动画

高性能动画，至少目前是那些更青睐浏览器的合成器的动画。如果您能够坚持更改变形和不透明度属性，则通常会看到出色的效果。我对卡片动画采用的常规方法就是这样：

1. 测量卡片收起时卡片中所有元素的位置。
2. 切换卡片的类别即可将其展开（而不显示动画）。
3. 现在，卡片已展开，请重新测量卡片中元素的位置。
4. 计算差值。
5. 应用负转换，将元素移回起始位置。
6. 开启动画。
7. 移除负转换，观察元素迅速恢复到屏幕上的最终位置。

所有这些操作听起来可能开销很大，但从用户交互的那一刻算起，有一个 100 毫秒的窗口，动画必须开始播放。如果超过该值，用户就会察觉到延迟。您可以利用这段时间执行成本高昂的准备工作，这样就能降低动画播放期间的运行成本。在大约 50-100 毫秒后，还有一个窗口用来进行整理工作，这可能非常方便，具体取决于您要执行的操作。

在前 100 毫秒内完成动画的高开销工作，在 Nexus 5 上，这项工作大约需要 70 毫秒，因此还有余地。

获取代码

如果您想详细了解该网站，代码已在 GitHub 上发布一事，您会很高兴。欢迎前来看看！