动效设计基础：动效的12项基本原则
说到动效设计，很多人第一反应是「让界面动起来就行」。其实不然。我做了这么多年UI，踩过最大的坑就是——动效不是为了炫技，而是为了传递信息。
动效的12项基本原则，最早来自迪士尼动画师Ollie Johnston和Frank Thomas。他们总结的这套原则，后来被UI设计圈全盘接纳。说白了，动画和UI动效的本质是一样的：都是让人感觉「真实」。
1. 缓动（Easing）
这是最基础、也最容易被忽略的原则。你想想看，现实世界里有东西是匀速运动的吗？没有。汽车启动会加速，刹车会减速。UI动效也一样。
核心要点：缓动让动效「活」起来。没有缓动的动画，就像机器人走路——僵硬、不自然。
我在项目中遇到过最典型的例子：一个弹窗从屏幕中央弹出，用了线性运动。用户反馈说「感觉像被什么东西砸了一下」。后来改成缓入缓出，同样的动画时长，用户说「舒服多了」。
常用的缓动曲线有：
- ease-in：缓入，适合元素离开屏幕
- ease-out：缓出，适合元素进入屏幕
- ease-in-out：缓入缓出，适合元素在屏幕内移动
我的习惯：弹窗进入用ease-out，退出用ease-in。这样进入时感觉「轻盈」，退出时感觉「自然」。
2. 时间（Timing）
时间决定了动效的「性格」。同样的缓动曲线，200ms和500ms给人的感觉完全不同。
我一般遵循这个经验值：
| 动效类型 | 推荐时长 | 说明 |
|---|---|---|
| 按钮反馈 | 100-150ms | 要快，不能让人等待 |
| 页面切换 | 300-400ms | 适中，给人过渡感 |
| 弹窗出现 | 250-350ms | 太短显得突兀，太长显得拖沓 |
| 拖拽交互 | 跟随手指 | 不能有延迟，否则感觉卡顿 |
注意：移动端和桌面端的时长不一样。移动端要快10%-20%，因为手指操作更直接。
3. 跟随与重叠（Follow Through & Overlapping Action）
这个原则很有意思。它说的是：当一个物体停止运动时，它的「附属部分」不会立刻停下来。
举个例子：你甩动一条绳子，手停了，绳子末端还会继续摆动。UI里最常见的应用就是「下拉刷新」的弹性效果。
我曾经做过一个列表删除动效：卡片向左滑出，但卡片上的文字图标稍微延迟一点才消失。用户反馈说「感觉特别顺滑」。这就是跟随与重叠的魅力。
4. 缓入缓出（Slow In and Slow Out）
这个和缓动有点像，但更强调「开始和结束的慢」。说白了，就是让动效在开始和结束时都慢一点，中间快一点。
为什么？因为人眼对「开始」和「结束」最敏感。中间的过程反而可以快一些。我习惯用贝塞尔曲线来调这个：
/* 缓入缓出的贝塞尔曲线示例 */
transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);5. 弧形运动（Arcs）
现实世界里的运动很少是直线的。扔一个球，它是抛物线。UI里的元素也一样。
我见过很多新手把元素从A点直线移到B点，结果看起来像「瞬移」。稍微加一点弧线，感觉就对了。
6. 预备动作（Anticipation）
这个原则来自动画：角色在跳起来之前会先蹲下。UI里怎么用？
比如一个按钮，点击之前稍微放大一点，再缩小回去。这个「放大」就是预备动作。它告诉用户：「我要被点击了」。
7. 夸张（Exaggeration）
UI动效不需要太夸张，但适当的夸张能增强反馈。比如点赞动画，心形图标弹出来再缩回去，比单纯变色更有「爽感」。
8. 挤压与拉伸（Squash and Stretch）
这个在UI里用得不多，但用好了很出彩。比如一个卡片被点击时稍微压扁一点，释放后弹回原状。感觉就像有「弹性」。
9. 次要动作（Secondary Action）
主要动作之外，加一点小细节。比如弹窗出现时，背景稍微变暗。这个「变暗」就是次要动作，它强化了「弹窗在顶层」的感觉。
10. 节奏（Staging）
动效要有节奏感。不能所有元素同时动，也不能动得乱七八糟。我习惯用「错峰」的方式：先动背景，再动内容，最后动按钮。
11. 吸引力（Appeal）
动效要好看。这个听起来很虚，但做起来很实在。颜色、曲线、时长，都要让人觉得「舒服」。
12. 连贯性（Solid Drawing）
动效要符合物理规律。不能一个元素突然消失，也不能一个元素从屏幕外飞进来却没有任何减速。
动效在UI中的作用
说了这么多原则，动效在UI里到底有什么用？我总结了三层：
- 引导注意力：动效告诉用户「看这里」。比如新消息提醒的抖动，就是让你注意到它。
- 传递状态：加载中的旋转、成功后的勾选动画，都在说「我在工作」或「完成了」。
- 增强体验：好的动效让操作变得「爽」。比如iOS的返回手势，那个跟随手指的动效，让人感觉「这APP真跟手」。
一句话总结：动效不是装饰，是沟通。它用「运动」这种人类最本能的方式，告诉用户发生了什么、接下来会怎样。
嗯，这12条原则，每条单独拿出来都能讲一节课。但实际做项目时，你不需要全部用上。选2-3条，做到极致，效果就出来了。我刚开始做动效时，恨不得每条都用上，结果界面乱成一锅粥。后来学乖了：少即是多。
下一章，我会讲怎么把这些原则落地到代码里。到时候咱们用CSS和JavaScript，把这些原则变成真正的动效。