动效的底层规律

画面里的字、图、形状自己动起来，叫动效。它是 AI 用代码做片子时最拿手的部分，也是最容易做得“一股模板味”的部分。差别全在几条底层规律上。

动效在做什么

动态图形motion graphics，行内简称 MG 或动效，指的是让图形、文字、图片这些设计元素随时间变化。它和“动画片”的区别是：动画片讲角色和故事，动效讲信息和关系。

一个元素的一生有三段，每段的动效任务不同：

好的动效只做四件事：引导注意（动的东西先被看到）、解释关系（这个从那个里面出来，所以它们有关）、确认动作（按下去，它有反应）、赋予性格（同样是出现，稳稳地出现和蹦出来是两种品牌）。不属于这四件事的运动，都是噪音。

十二条原则，来自迪士尼

1981 年，迪士尼的两位元老动画师弗兰克·托马斯和奥利·约翰斯顿出了一本书叫《生命的幻象》，把公司几十年画角色的经验总结成十二条原则。它们本来是讲怎么让画出来的角色看起来活着，后来被整个动效行业拿去用了，因为让一个方块“有生命”的道理是一样的。

下面的演示把其中最常用的四条做成了“有它和没它”的对照。左边是直接移动，右边加了原则。

十二条全在这里。右边一列是它在图形动效里对应的做法，那才是你对 AI 说话时用得上的。

缓动：动效质感的头号因素

一个东西从 A 移到 B，速度怎么分配？这件事叫缓动easing。它是区分“像模板”和“像专业”的第一道线。下面五个圆点走同样的距离、用同样的时间，只有速度的分配不同。

记一条就够用：进来用缓出，出去用缓入，在画面里挪位置用缓入缓出。为什么进场用缓出？因为观众需要的是东西尽快出现在大致的位置，然后有时间看清它停稳；而出场时没人在意它的终点，走得越利索越好。

缓动还有“强度”。同样是缓出，可以很温和，也可以一开始极快然后拖一个很长的尾巴。后者行内叫 expo out 或 quint out，是现在产品片和高端广告里最流行的手感：利落地到位，然后几乎察觉不到地滑完最后几个像素。AI 写代码时用的词是 cubic-bezier(0.16, 1, 0.3, 1) 这样的四个数，你不用记，说“强缓出”“缓出的尾巴拖长一点”它就明白。

时长：多快算快

新手做的动效普遍太慢。一个标题花一秒半才飞到位，观众已经等烦了。下面是经验值。记住它们的量级，比记具体数字重要。

• 越大越慢，越小越快。大东西移动得快会显得轻飘，小东西移动得慢会显得拖沓。
• 出场比进场快。大约是进场的 60% 到 70%。
• 距离越远，时间稍长，但不成正比。移动 100 像素用 0.3 秒，移动 1000 像素用 0.6 秒就够。
• 总时长算清楚。一屏有 5 个元素依次进场，每个 0.4 秒、间隔 0.1 秒，全部到位要 0.8 秒。如果这一屏只停 2 秒，观众只剩 1.2 秒看内容。

进场方式的词汇表

元素“怎么出现”有十来种基本方式。每一种的性格不同。下面是同一行字的六种进场。

选哪一种，取决于这个元素“是什么”。一条线应该被画出来，一个数字应该滚出来，一张照片应该被贴上来或者滑进来，一个标题适合遮罩揭示。让每种材质用符合它性质的方式出现，画面就不会有模板感。反过来，所有东西都用同一种“弹出”，就是模板感的来源。

错峰：不要一起到

一组元素进场时，让它们依次到达而不是同时到达，叫错峰stagger。

间隔通常在 40 到 100 毫秒之间，也就是一到三帧。太短看不出先后，太长就成了一个一个报幕。错峰的顺序就是你希望观众阅读的顺序：从左到右，从上到下，或者从最重要的到最不重要的。

错峰还可以用在一个元素的内部：卡片的底板先到，上面的图晚两帧到，文字再晚两帧。这就是十二原则里的“重叠”。它让一个整体的进场有了层次，而总时长只多了一点点。

编排：一屏之内的先后

单个动效做对了，一屏里十个动效放在一起仍然可能很乱。把多个运动组织起来的工作叫编排choreography。几条规矩：

• 同一时刻只有一个主角在动。主要的运动进行时，其他元素要么静止，要么只做极小的配合。
• 进场顺序等于阅读顺序。先出标题，再出图，再出说明。不要让说明比它说明的东西先出现。
• 跟着声音走。有旁白的片子，元素在旁白说到它的那个词时出现，而不是在句子开头一股脑全出来。
• 让运动有因果。一个元素的到达“推”出了下一个；一条线画到头，终点上才冒出一个标签。有因果的画面像一台机器在运转，没有因果的像一堆东西各飞各的。
• 不要凭空出现和凭空消失。能从上一个状态变过来的，就不要淡入一个新的。上一屏的小图标放大成这一屏的主图，上一屏的数字移到角落变成这一屏的标签。这叫保持连续性，是高级动效最显眼的特征。
• 清场要干脆。换屏时旧元素一起出，或者被新的画面整体推走，不要一个一个磨蹭着退。

强调和持续

强调动效

元素已经在画面上了，你想让观众再看它一眼。常用的手法：

持续动效

元素停留期间一直在进行的小运动：轻微的上下漂浮、缓慢的旋转、呼吸般的缩放、背景粒子的流动。它能让画面“活着”，但也是最容易过量的。一屏里所有东西都在漂，观众会晕，也读不进字。原则是：背景可以有极缓慢的持续运动，前景要读的东西保持静止。

两个增加质感的细节

运动模糊motion blur：快速移动的东西在每一帧上留下拖影。真实摄影机拍运动物体都会有。给动效加上运动模糊，快速的移动会显得顺滑而有速度感；不加，则是干净利落的“数码感”。两种都对，全片统一就行。

帧率质感：动效不一定要每一帧都更新。手绘动画传统上每秒只画 12 张，每张停两帧，行内叫一拍二on twos。这种略带顿挫的运动有手工的温度，《蜘蛛侠：平行宇宙》把它用成了标志。如果你要“手绘感”“定格感”，可以要求元素的运动降到每秒 12 帧甚至 8 帧，而镜头和文字仍然保持流畅。

动效的性格

把上面的旋钮组合起来，就得到一套动效的“性格”。它应该和品牌、内容的气质一致。四种常见的性格和它们的参数：

给 AI 一份动效规格

和颜色、字体一样，动效也应该在开工时定好一套规则，全片照此执行。行内叫 motion spec。它不长，但能避免“每个元素一种动法”。

性格　　稳、短、不回弹。像把纸片放到桌上。
缓动　　进场强缓出；出场缓入；位移缓入缓出。除背景慢推外不用匀速。
时长　　小元素 0.2s，卡片与标题 0.4s，整屏切换 0.6s。出场为进场的 2/3。
进场　　文字：从下方 24px 滑入并淡入。
　　　　截图与卡片：从略大（104%）落到 100%，带极轻的投影变化，像贴上去。
　　　　线条、圈、箭头：描边绘制，0.5s。
　　　　数字：滚动计数，0.8s，先快后慢。
错峰　　同屏多个元素间隔 60ms，按阅读顺序。
停留　　进场完成后静止。背景允许 4 秒 3% 的慢推。
强调　　只用手绘橙色圈和下划线，每屏最多一处。
出场　　整屏元素一起向上滑出并淡出，0.25s；或被下一屏推走。
连续　　能延续到下一屏的元素不重新进场，移动到新位置即可。
质感　　不加运动模糊；手绘线条按每秒 12 帧更新，其余 30 帧。

片例截图与片段仅用于学习与评述，版权归原作者与出品方所有，出处见片单与出处。