使用 Framer Motion 制作网页动画

Animating the web with Framer Motion

正确的动画可以为网页注入活力，而过度的动画可能会分散注意力。在本课程中，我将教您完美的平衡，深入了解有意义的动画世界。

您不仅会学到制作动画，还会学到如何优雅地增强用户体验。您的技能不仅会提升到一个新的水平，而且还会活跃起来，为每个项目带来一丝优雅和功能性！

尽管纯 CSS 每周都变得更加强大，具有滚动驱动动画和视图转换等令人惊叹的功能，但它仍然有其局限性。最大的限制之一是您不应该为元素的所有属性设置动画。例如，宽度、高度、顶部或左侧等动画属性可能会导致动画卡顿。最佳实践是通过translateX/Y 和scale 等动画属性来操纵元素的大小和位置。

但为什么 Framer Motion 会比普通 CSS 做得更好呢？
Framer Motion 包含一些 ✨ 魔法 ✨，他们称之为布局动画。当使用布局动画来调整元素的宽度/高度大小时，Framer Motion 在幕后使用计算，将此调整大小转换为缩放和变换动画？这使得动画的表现总是比纯 CSS 动画好得多——几乎不需要考虑这一点！

但它不仅仅针对宽度/高度执行此操作！
然而，这种魔力并不止于宽度和高度的高性能动画！ Framer 甚至能够将非常复杂的布局从一种布局动画到另一种布局。例如，将两个元素从 flex-direction: row 动画化为 row-reverse。看看下面的魔术表演吧！

2024-09-28 更新 从 21 节课（1 小时 38 分钟） 更新到58 节课（4 小时 37 分钟）

2024-12-31 更新 从 58 节课（1 小时 38 分钟） 更新到78 节课（6 小时 4 分钟）