写在开头
Hello,大家好,我是大宝蛋
今天呢,给大家带来一个Emoji表情动画的制作教程,教程比较简单,跟着做大概15-20分钟就能做出一个简单的小样,因为这是我第一次录制视频,如果有瑕疵还请多担待,我会在以后改进调整
Emoji表情运用的场景还是非常多的,既可以自己制作微信表情动画也可以用在一些APP的主观评价功能里面,通过这些表情的制作是可以提升用户的评价参与率,从而为业务去拿到结果。
那废话不多说,我们开始吧
提供的材料
本次教程将会直接提供,SK源文件(方便大家尝试导入AE的一些调整),AEUX插件(SK与AE导入插件)以及导入到ae后的教程文件啦,AEUX的安装教程需要大家百度下。
材料获取方法:
查看下方评论区回复,我将百度云盘的链接地址粘贴在里面
动画解析
我们看完上方的GIF动画我们大概能了解这次要制作的内容,我们拿开心做分解。会先昂起头然后张开嘴大小,接着返回原来位置,紧接着再抬起到另外一边大笑起来,最终返回远原处完成一个简单的动画那表情。
那么核心我们可以先将一个表情拆解成5个关键帧,那我们需要做的事情就是将5个关键帧用动画进行连接
STEP 1 整理图层,并进行绑定链接…
我们这里跳过安装/使用导入插件AEUX的教程(提供插件,感兴趣的朋友可以查查如何使用),了解的朋友的直接拿文件使用吧。进入AE的合成里面我们第一步要做的便是调整图层顺序,并且给不同属性的图层更改颜色(这一步是为了养成习惯),日后做多图层的工作能快速筛选
接着我们点开两个表情的预合成,我们键盘按住花键/Win+K,调出合成设置窗口,将预合成的宽高调大,这样做的目的就是表情动画可以有更多表现的空间
接下来呢 我们新建一个空对象,然后我们将所有的脸部器官全部父子级连接到空对象,这样的话我们控制空对象就能带动全部的器官了,在后续的工作,空对象负责大的五官位移和缩放移动,对应的每个小的器官负责
细节的微调。这样的好处了是对复杂的移动进行了分开处理,更利于我们调整细节以及后期的优化。试想一下,如果不用空对象去设计,那么后期眼部既要位移也要旋转还要跟着整体调整会是多么复杂的设计
STEP 2 制作笑脸表情…
我们将前面的5个关键帧打在时间轴上,然后分别调整这5个静态帧的表情角度 ,让静态帧样式和我们前面的分镜一致即可
接着呢 我们点击【钢笔工具】-【转换“定点”工具】,我们对画布上的节点进行点击,然后我们就可以对路径细节调整,此时直线可以通过两个卯点变成了曲线,其他的路径也同样参考这个方法调整路径的曲率
我们选中嘴巴的图层按【S】键,打开大小属性,我希望表情在抬头的时候嘴巴有变大的细节,但是这个大小我不希望是等比例的放大,我们可以关掉【联动】,单独的对宽或者高进行伸缩
接着我们对舌头也进行了调整,我让表情在随着嘴巴上移并且进行缩放的时候舌头进行缩放,这样的好处是看起来更加真实,脸部的器官有前后的动态关系
接下来就是对眼睛进行调整,再调整下关键帧的位置,让脸部器官有个先后的顺序感,眼睛在随着空对象上移的同时,单独的在进行上移一部分,并且我们模拟人笑的时候眉毛会动的样子,这样我们按【R】就能以眉
尖的位置进行旋转了,眉毛在移动到最上方的时候进行旋转,回到底部的时候则返回最开始的样式。注意在时间轴上我们要把关键帧前后顺序错开来,嘴,舌头,眉毛,都不要同时动,同时动会比较呆板,我们让他们
有个先后顺序
接下来我们就要再创建一个空对象,这个空对象是意义是只针对上下抖动进行调整从而回到最终的圆点,这样我们就相当于把上下移动的属性单独拆解出来了 ,方便控制,然后给一个类似缓出的效果
最终呢我们还是希望这个动画能够回到原点,我们变将动画在最后一帧的时候调整到最初是的位置即可(这里比较不好解释,可以通过查看视频进行了解)
接下来就是微调每个关键帧,让真个表情动起来更加的自然可爱
STEP 3 制作生气表情…
为了更好的对脸部器官进行设计,生气表情的眉毛方便控制,重新绘制了一个路径形式的去代替原有的表情
关于眉毛的尖角,我们需要打开路径的属性去设置下
当表情抬头的时候嘴巴会拉长,嘴巴这一块我们也是通过路径去调整大小,方法我们打开嘴巴的时间轴属性,选择【椭圆形】-【Path】-【path】进行关键帧,将嘴巴的顶部的节点进行拉伸,将两边的节点也进行拉开处理
然后我们为了逼真效果再补充一个牙齿,当嘴巴拉到最大的时候可见牙齿,这里用遮罩新建即可,牙齿我们使用AE的矩形然后调整圆角,接着复制嘴巴放在牙齿上面,选择这个复制的嘴巴做牙齿的遮罩
接下里就是重复的步骤,新建空对象然后连接父子级,此处调整较多偏细节 具体的根据视频和源文件查看
STEP 4 进行包装部分
我们新建一个合成然后将做的表情的合成放进去,并对这个合成按【s】进行缩放
按S键我所缩小这个表情的合成,给这个界面加点小投影然后配上文字即可
我们让表情动画在出现的时候有个变大的效果,让用户能够更加的聚焦于表情细节,因此我们对合成进行放大处理,并且调节曲率
包装完以后我们选择“合成(composition)-》添加到队列(add to render queue)-》输出(output)“即可
STEP 5 如何导出序列帧
在选择导出的时候选择导出序列帧(PNG Sequence),导出了每秒60FPS,即可输出序列帧提供给开发同学,如果过多的帧数导致性能的下降,我们对序列的13579….这样下去的所有奇数序列进行删减,然后修改序列
帧名称,进行排序 将之前的 3改成2 5改4…..这样我们就减少了一半的帧,比较笨的办法,但是能解决问题
那视频到这里就录完了,一个简单的小动画,祝大家新年快乐,赚大钱。
STEP 6 总结
表情制作并不涉及到过多的技术,适合新手去练习,核心是把我节奏和表情的细节,让动画看起来更加的生动
当然你也可以加我微信 我们去交流一些更好玩的东西 VX:dabaodan0622




