创意动效设计：原则与实践

动效即沟通

动画的存在有其目的，而不仅仅是美学。做得好时，动效能传达元素之间的关系、确认用户操作，并引导用户的视线完成过渡。做得不好时，它会带来摩擦和延迟。

十二原则在 UI 中的应用

迪士尼的十二条动画原则——挤压与拉伸、预备动作、舞台调度等——在数字界面中有着出色的适用性。缓入缓出曲线让过渡感觉真实；预备动作让用户为即将发生的事情做好准备。

Framer Motion

对于 React 应用，Framer Motion 提供了一套贴近设计师思维的表达性 API。initial、animate 和 exit 属性定义了组件生命周期的三种状态。

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.4, ease: "easeOut" }}
>
  {children}
</motion.div>

克制

动效设计中最重要的原则是克制。并非每个元素都需要动画。将动效留给有意义的时刻——页面过渡、状态变化、操作确认。过度使用会稀释冲击力。

性能

在合成器线程上运行的动画——opacity 和 transform——在任何设备上都能流畅运行。避免对触发布局的属性（如 width、height、margin）进行动画处理。

结语

动效设计是一门需要刻意练习的技艺。从目的出发，选择最简单的动效来服务它，然后向精细化迭代。