Ai制造2D动画教程【移动篇】
修改于02/1661 浏览
上回简单介绍了如何用Ai制作2d动画，今天讲解下人物左右移动待命的动画。
动画序列图
首先我们设置人物的初始图，这里可以面朝屏幕也可以其他方向，再准备一张不同的人物正面图做序列帧，初始图和待命图放进去:
人物初始图
序列帧1:待命
接着我们就可以和Ai这样沟通:
上面的图片按先后顺序分1帧和2帧增加动画序列帧:（命名为:待命）帧顺序:1→2（每帧停留0.1~0.15秒）非对称停留：帧1停留1秒，帧2停留1.5秒，细微位移：帧1时让人物向上移动1.1像素，帧2时回位，使用缓动函数:所有过渡效果不要使用线性变化，请使用ease-in-out或正弦曲线，让动作开始和结束柔和，中间平滑。
设定人物无任何移动和操作时（无摇杆操控/A按钮/B按钮操作）触发动画序列帧:待命
然后成品:
这个效果可以看到人物会有呼吸感，如果想要效果更好需要序列图做的更好衔接的更流畅。
接下来我们再做向右/左移动的动画，植入序列图:
1
2
3
4
5
6
7
8
9
因为我的软件无法一次性导入所以这里我是分组完成的这样和Ai沟通:
一组:
上面的图片按先后顺序分1帧和2帧和3帧和4帧增加动画序列帧:（命名为:走路右一组）帧顺序:1→2→3→4（每0.2秒切换一帧然后循环）播放动画时，角色每帧水平移动5像素，同时Y轴轻微起伏（+2、-1、-2、+1像素）
设定人物向右移动时（摇杆操控向右）触发动画序列帧:走路右一组
二组:上面的图片按先后顺序分5帧和6帧和7帧和8帧增加动画序列帧:（命名为:走路右二组）帧顺序:5→6→7→8（每0.2秒切换一帧然后循环）播放动画时，角色每帧水平移动5像素，同时Y轴轻微起伏（+2、-1、-2、+1像素）
建立动画状态机:移动组，将动画序列帧:走路右一组和动画序列帧:走路右二组组合（触发动画序列帧:走路右一时触发动画序列帧:走路右二组（帧循环为1→2→3→4→5→6→7→8→2（每次循环结束从2帧开始）））
成品如下:
可以看到视频中的小人已经简单实现了向右走的动作，接下来左边就更加简单了，我们可以这样输入:
设定人物向左移动（摇杆向左）时触发并水平翻转（使用scale(-1, 1)或transform: scaleX(-1)）动画状态机:移动（翻转时保持坐标和碰撞箱正确）
成品
可以看到人物的移动动画可以做到很连贯，这样一个简单的移动动画就完成了。
Ps:像序列图这种可以去找找免费的资源有九宫格或者已经抠图分割好的。
下期教程我研究动作连携特效的动画，感兴趣的可以关注一下。