去年年底，我构建了 Chrome 开发者峰会网站。我希望它有 Material Design 的外观和风格，因为它是一种很棒的设计语言，而且我觉得它非常适合我想要创建的网站。但是，与任何新的设计语言一样，需要解决各种问题、挑战和做出决定，尤其是在处理网络惯例时。
制作该网站特别具有挑战性的一个方面是，点击卡片时会呈现“包版”效果。
要实现这样的效果，以 60fps 的速率运行，需要进行一些思考、进行原型设计和一些有趣的折衷。在 Chrome 开发者峰会上，我谈到了这种效果，并详细解释了我是如何构建这种效果的。
制作高性能动画
高性能动画，至少目前是那些青睐浏览器的合成器的动画。如果您能够坚持改变变形和不透明度属性，通常效果会很好。我对卡片动画采用的一般方法就是这样：
- 测量卡片收起时卡片中所有元素的位置。
- 切换卡片的类别即可将其展开（无需添加动画效果）。
- 现在，卡片已展开，重新测量卡片中元素的位置。
- 计算差值。
- 应用负转换，将元素移回起始位置。
- 开启动画。
- 移除负转换，观察元素在屏幕上突然出现的位置。
所有这些操作听起来可能开销很大，但从用户互动那一刻开始，有 100 毫秒的时间，动画必须开始。如果超过该值，用户就会感觉到延迟。您可以使用此时间执行成本高昂的准备工作，以便在动画本身播放期间以更低的成本运行。在大约 50-100 毫秒后，还有一个窗口用于整理工作，根据您要执行的操作，该窗口可能很方便。
在前 100 毫秒内完成动画的高昂工作，而在 Nexus 5 上，这项工作大约需要 70 毫秒，因此还有余地。
获取代码
如果您有兴趣查看该网站的更多详细信息，您会很高兴得知代码已在 GitHub 上发布，快去看看吧！