让卡通人物转一整圈

八个分层的角度、一个滑块,零件在角度之间滑动和弯折,再用关键帧在每个角度停住、快速转到下一个。

你会做出什么

  • 同一个人物的八个角度,每 45° 一个,每个角度都在同样的画布上画成分开的零件:脖子、身体、头、耳朵、头发、一撮翘毛、眼睛、鼻子、嘴。
  • 一段 6 秒、每秒 24 帧的转身:在每个关键角度停住,每转四分之一圈用半秒。
  • 一个支持 WebGPU⁠ (外部网站,在新标签页打开) 的浏览器,比如新版的 Chrome、Edge 或 Safari。

1. 把各个角度画成零件

  1. 先画正面,再每隔 45° 画一张,一路转回正面:正面、四分之三侧、正侧、四分之三背、背面,以及另一侧的三张。可以让图片模型来画,每次都要求同一个人物、同样的画布和同样的平涂颜色。

  2. 把每个角度拆成零件,一个零件一张 PNG,留在完整画布上原来的位置,不要裁切。被别的零件挡住的部分也要画完整,每个零件有自己闭合的轮廓,稍微挪动时才不会露出空洞。

  3. 每个角度里同一个零件用同一个名字,从前往后编号:01 嘴 … 11 脖子。每个角度放一个文件夹,按转身顺序编号,再加第九个文件夹放一遍正面,让这一圈首尾相接。

  • 卡通男人画了八次,每 45° 一张:正面、四分之三侧、正侧、四分之三背、背面,再绕到另一侧的四分之三正面。
    八个角度
八个角度,每个都是零件叠起来的样子:从正面一路转到最后一个四分之三侧。

继续之前,先把各个角度并排检查一遍。每张画都要正好夹在相邻两张之间,转身才成立:头一样高,头发下缘平滑地升降,耳朵在同一高度。这里侧后方的两个角度就重画过一次,因为头发垂得太低、头也太宽。

2. 建画组

  1. 导入装着各个角度的文件夹(见导入⁠ (在新标签页打开))。各个角度会以文件夹的形式出现在项目面板里。

  2. 在装着它们的那个文件夹上,点它的建画组按钮。对话框按控制顺序列出各张画,按从前到后列出各个零件。

  3. 检查每个零件跟随谁、被谁裁切:眼睛、鼻子、嘴跟着头,只在头里面显示;翘毛跟着头发。把控制命名为 Turn,然后创建(建一个画组⁠ (在新标签页打开))。

“新建画组”对话框:按控制顺序列出人物的各个角度,从前到后列出零件,每个零件标着它跟随的零件和裁切它的零件
  1. 各个角度,按控制顺序。
  2. 每个零件一个图层,从前到后。
  3. 零件跟着谁动、在谁里面显示。
  4. 选择角度的那个滑块。

3. 让零件在角度之间过渡

  1. 选中任意一个零件的图层,在属性 › 行为里打开它的换图行为。

  2. 选在画之间变形。它会量出每个零件从一个角度到下一个怎么动,把空隙补上;所有零件一起处理,一步撤销。

  3. 选中 Turn 图层,在效果控件里把它的滑块拖到两个整数之间:零件现在会滑动,头发从一个轮廓弯到下一个,不再跳变。

人物停在正面和四分之三之间,Properties 里头发的换图行为显示“在画之间变形”,以及它各个切换点的“自动(变形到下一张)”
  1. 两个角度之间的一半。
  2. 量出每个零件在角度之间怎么走。
  3. 这个零件怎么过这个切换点。

4. 检查每个切换点

  1. 把滑块逐个拨到各个半值,也就是一个角度交给下一个的地方,盯着每个零件看。

  2. 哪个零件跳了或弯得难看,就打开它的换图行为,在在画之间下换一种方式:滑动、弯折到下一张或原地换(在画之间变形⁠ (在新标签页打开))。

重点看三种情况。零件在切换点“蹦”一下,通常应该改成滑动而不是原地换。零件变得像橡皮,是因为两张画差得太多还要硬弯,该改的是画,而不是补间。整个角度“蹦”一下,是那张画没有夹在相邻两张之间。中间帧不用再往细里抠:下一步才决定观众能看到它们多久。

5. 调转身的节奏

  1. 给滑块打关键帧⁠ (在新标签页打开):0 是正面,2 是侧面,4 是背面,6 是另一侧,8 回到正面。

  2. 在每个关键角度停住,再用 12 帧转四分之一圈:起步慢,稍微转过头,再回正。帧数按下表。

  3. 每个关键帧都加缓动,在图表编辑器⁠ (在新标签页打开)里调出慢起步:每次转身的第一个关键帧出去、回正那一帧进来,影响都在 60% 左右。

四分之一圈开始转过头回正
正面到侧面第 14 帧,0第 24 帧,2.15第 30 帧,2
侧面到背面第 47 帧,2第 57 帧,4.15第 63 帧,4
背面到侧面第 80 帧,4第 90 帧,6.15第 96 帧,6
侧面到正面第 113 帧,6无第 125 帧,8
正面侧面背面侧面正面012345秒匀速调过节奏

转身就是在这一步活起来的。匀速转时,中间帧几乎占满每一帧,看起来像展示台在转。停住的角度给眼睛留出姿势去看,快速的转身让每段中间帧只露几帧。最后四分之一圈落回正面时不转过头,这样转身可以循环播放。

6. 压在脚底

  1. 为这个镜头新建合成,尺寸和帧率一样,把画组作为一个图层放进去(嵌套⁠ (在新标签页打开))。

  2. 把这个图层的锚点挪到他的脚底,位置也设到同一点,这样缩放时脚一直踩在地上(变换⁠ (在新标签页打开))。

  3. 按下表在每次转身前后给它的缩放打关键帧,每个关键帧都加缓动。

每次转身前后时间缩放(宽 × 高)
之前转身前 6 帧100 × 100
下沉转身开始时104 × 95
拉长转到一半97 × 104
落地转身结束时102 × 98
复原再过 6 帧100 × 100

身体转之前会先发力。每次转身前轻轻一压、转的时候一拉,转身就有了这股劲。因为它们在镜头的图层上,而不在零件里,所以两者哪个都能单独改节奏,互不影响。

7. 导出

  1. 打开镜头合成,选导出视频或图片。选 MP4 或动态 GIF、整个工作区和想要的尺寸(导出⁠ (在新标签页打开))。

接下来

  • 深入画组。每个零件的切换点能怎么处理,以及底下的姿势驱动和换图行为。 画组
  • 节奏为什么重要。同一个转身,匀速和调过节奏的版本并排对比。 一个人物转身
  • 另一篇教程。用骨骼和 IK 绑一个纸偶,让它走起来。 绑骨骼做走路循环

接着看