去年年底，我构建了 Chrome Dev Summit 网站。我希望它具有 Material Design 的外观和风格，因为这是一种出色的设计语言，而且我觉得它非常适合我想要创建的网站类型。不过，与任何新的设计语言一样，在采用 Material Design 3 时，您会遇到一些问题、挑战，需要做出一些决策，尤其是在处理 Web 惯例时。
在网站的众多方面中，最难实现的是点击卡片时的“接管”效果。
为了让这种效果以 60fps 的速度运行，我们进行了一些思考、原型设计和有趣的妥协。在 Chrome 开发者峰会上，我谈到了这种效果，并详细介绍了我是如何构建它的。
构建高性能动画
高性能动画（至少目前）是指那些有利于浏览器合成器的动画。如果您能够坚持更改 transform 和 opacity 属性，通常会获得出色的性能。我为卡片动画采用的一般方法正是如此：
- 测量卡片处于收起状态时其中所有元素的位置。
- 切换卡片的类以展开卡片（不带动画效果）。
- 在卡片展开后，重新测量卡片中元素的位置。
- 计算差值。
- 应用负转换，将元素移回起始位置。
- 开启动画。
- 移除负转换，并观看元素快速移动到屏幕上的最终位置。
这一切听起来可能很耗费资源，但从用户互动的那一刻起，到动画必须开始之间有 100 毫秒的时间窗口。如果超过此值，用户就会感觉到延迟。您可以在这段时间里完成昂贵的准备工作，以便在动画播放期间以更低的成本运行。此外，在结束时还有大约 50-100 毫秒的时间用于整理工作，这可能非常有用，具体取决于您要执行的操作。
动画制作的耗时工作是在前 100 毫秒内完成的，在 Nexus 5 上，这项工作大约需要 70 毫秒，因此还有剩余时间。
获取代码
如果您有兴趣更详细地了解该网站，那么您一定会很高兴听到代码已在 GitHub 上发布，快去看看吧！