Framer Motion 动效系统设计实战
给 LiuliX Glaze 补动效时，我先把页面转场、滚动出现和按钮反馈收进一套能反复使用的规则。
前端动效
为什么需要动效系统
做 LiuliX Glaze 时，我没有把动效当成最后再加的一层装饰。页面跳转、内容出现、按钮被按下，这些时刻都在告诉用户界面发生了什么。规则不统一时，页面会显得很吵；节奏合适时，操作会更容易跟上。
基础原则
我先统一了节奏，再去写单个动画。页面入场、卡片 hover、路由切换和滚动出现用同一组 easing 与 spring，避免每个组件各自“有个性”。
先看性能
动效写进组件前，先确认它改变的是什么。transform 和 opacity 通常更适合高频反馈；直接改位置或尺寸，浏览器往往需要重新计算布局。对按钮和卡片这类小交互，差别会很明显。
// 推荐: 使用 transform
<motion.div animate={{ x: 100, opacity: 0.5 }} />
// 避免: 触发布局
<motion.div animate={{ left: 100 }} />
尊重用户偏好
prefers-reduced-motion 不是一个可有可无的开关。用户选择减少动效时，页面仍要能看懂状态变化，只是不再用明显位移、连续跳动或全屏效果抢注意力。