像素画动画缓动教程:用帧间距做出加速减速,动作更像活的
文本概览:全文约 1,758 字,阅读约 5 分钟。
说起来,很多人做像素动画,第一反应是“再多画几帧”。
其实更狠的一刀在别处:相邻两帧之间,你挪了几个像素。挪得多就快,挪得少就慢。把这个间距先收再放再收,动作才会像有重量,而不是电梯匀速。
推荐 Pixel Overload 的像素画动画视频《The secrets to good Pixel Art animation!》非常不错。
先定 12fps,别一上来卷满帧
他把动画说得很白话:一串图按时间播出去,眼睛就会当成在动。电视常见约 24fps;像素画里很常用的是 12fps,也就是“画在 2 上”,每两格电视帧画一格。
为什么是 12?帧少,活不够滑;帧多,工作量翻倍。12 正好卡在中间,新手和老手都好用。
还有一句容易忘:你画的时候盯着一帧看很久,播的时候它可能只亮 十二分之一秒。别按“画画时的观感”去估时长。
速度公式:像素间距 ÷ 时间
帧率锁死(比如 12fps)时,每帧占的时间一样,帧与帧之间挪了多少像素,就是速度。
想加速:中间几帧把位移拉大。想减速:把位移压到 1~2 像素。想停住:位移归零,或者干脆少画几帧硬切(后面会说涂抹)。
别只在时间轴上拖 duration。先问自己:这一步,角色在网格上走了几格?
规划:先动色块,再穿皮肤
他承认自己以前也不爱规划,直到发现:对着成品立绘抠像素挪来挪去,很容易挪成“别扭的偶人”。
动画看的是运动,不是单帧光影有多精。做法是:
把角色拆成色块肢体(头、躯干、四肢各一种色)
只让这些色块跑通整段动作
运动顺了,再把皮肤、衣服、高光贴回去
布料可以想成一串延迟反应的点:上面的点动了,下面的点晚半拍跟;连成曲线后,披风、头发、触手都能套这套。
跳、落之类还建议随手画一条路径线。路径定了,你只要管速度,不用边画边猜抛物线往哪拐。
高保真画到一半推倒重来,比多花十分钟画色块骨架贵多了。
打击要脆:少帧 + 涂抹 + 预备
武器挥砍别每一度角都画满。他举例:刀锋转过去,有时 两三帧 就够。东西那么快,屏幕上也待不久。
帧少会跳?用 涂抹(smear):把物体拉成带方向的色团,像实拍运动模糊。它同时告诉你速度和方向。别滥用;大动作、转折处用一下就行。
还想更“砸”一点:
- 预备(anticipation)
:动手前先反向蓄一下,可多停几帧
- 二次运动
:主动作带起周围轻物——重物落地,旁边小东西弹一下
这一课最该带走:缓入缓出
他自己点名:若只记一件事,就记 easing in / out。
做法很朴素:动作开头和结尾,把位移压小;中间再拉大。于是你看到加速、减速,而不是匀速滑轨。
经验值可以记一笔:起止大约 1~2 像素,中间可以到 8~9 像素(按角色尺寸缩放)。距离排布本身就是加速度曲线。
走路、挥拳、UI 弹窗,都吃这一套。间距全程差不多,动作会像贴轨滑过去,多半就是这里没拉开。
比 1 像素还慢:亚像素过渡
想比“每帧 1 像素”更慢、更润?他提到 亚像素动画:不真的画半格,而是加帧,在像素级做明暗与轮廓过渡,留一点“残影”,骗眼睛觉得走了半格。
这对 idle 呼吸很有用。细节另开练也行;先把缓动做对,再碰这一层。
过冲与夸张:别只挪一像素腿
过冲(overshoot):动作末端先越过一点,再弹回。角色会更“活”,道具、箱子也能用。
新手(和他当年的自己)常犯的错:手脚摆幅太怂。走路只挪一像素腿,怎么看都像在原地跺。宁可先画夸张大摆幅,再往回收。
设计角色时也给眼睛“挂钩”:披风角、帽子尖、武器刃口,让观众知道该追哪条边。
今天就能练的一小段
挑一个侧视跳跃或挥拳,按这个顺序来:
画板设 12fps
色块骨架跑通路径
标出每帧位移:起止小、中间大
大动作处加 1~2 帧涂抹或预备
最后再贴皮肤和阴影
回放时自检:起跳或出手前有没有明显“蓄一下”,落点或收招前有没有慢下来;若全程一个步长,回到第 3 步改间距表。
练完别停在“我会缓动了”。丢进你正在做的角色或小游戏里——走路、受击、拾取道具,随便接一段。动作一旦有重量,别人会觉得“这角色能玩”,你也会更想把下一段做完。
参考资料
[1] https://www.youtube.com/watch?v=J1sFBDQt8J0

