我知道你想学动效【第七期-教你如何优(zhuang)雅(bi)地duang】

用户头像
广州/动画师/10年前/702浏览
我知道你想学动效【第七期-教你如何优(zhuang)雅(bi)地duang】
用户头像
过No儿

最近在忙项目,于是很久没写东西啦,那是帮一个企业做的一个企业介绍动画,因为做得不是很好就不放出来了...我就挑里面的知识点再结合gif来讲一下吧,

还是要宣传一下:

有兴趣的孩子可以关注一下疯子在右工作室的公众号,有空没空我就会发点这样那样的...教程。【个人首页扫码


这一期要临摹的动图是这个。【第4期第三行的链接看第一个GIF

7e1957106fa76ac7251f059facc3.jpg

涉及的知识点:如何解析GIF,AE表达式(我自己更喜欢叫它作函数,因为我本身是学程序的)


首先,考一下你们观察能力过不过关。

  1. 老鼠在外围一直匀速旋转

  2. 猫的眼睛和老鼠的身体处于同一个旋转角度

  3. 猫的眼皮和瞳孔的垂直距离是固定的,但是眼睛至少还是会有半边眼白

  4. 底下的loading...像打字机一样逐个淡入完整后又整体淡化消失

  5. 仔细观察的同学会发现,这个老鼠的图片中心并没有对准圆心哟,甚至猫都没有图片中心






好的,开叼..噢不,开工啦~!!

首先把这个GIF拖进AE里面看

f39c5718d2fd32f8759bfff03e04.jpg

嗯,好的,看完了。

然后就开始动手画吧,什么?你想直接用图片做素材?啧啧啧,太没追求了,好好练习基本功呀孩子。

两种方法,可以直接用钢笔画形状图层,也可以纯色层然后画遮罩来做,看你的习惯吧。

OK,画脸之前,要讲一个小细节。

“条条大路通罗马”这句话大家都听过,对这GIF来讲,要做出来很多种做法。


这里,关于这个眼皮的做法,有两种会有比较明显区别。

第一种做法是层叠式(我自己取的名字)。    

脸》眼白》眼皮


第二种做法是挖孔式(还是我自己取的名字)。   

眼皮层、眼白层》带眼睛孔的脸【这里眼皮眼白的层序根据制作方法不同也会不同,所以方法真是各种各样嘛


经过我的考虑之后,我决定用第二种方法,并且

第二种方法中,有“相减”的蒙板,所以需要用纯色层去画,不能用图形。

具体图我就不教大家怎么画了,去练基本功去吧。

这里我不画猫了,稍微改下造型,变成(danshen)狗。

9b235718d38732f8759bff63d549.jpg

这个大型的方块就是眼皮啦,不要介意,我晚点会找东西挡住它的。

fda05718d4b66ac7254fbc20f2cd.jpg

给看看现在的图层情况


有人注意到脸部其实是两个颜色呢?

两种方法:

1是切开左右两边脸,分别调色;

2是用“梯度渐变”,然后两个点的X值调在分界处两边,Y值一样;

然后是眼球,这里要注意,锚点要放在眼睛的中间位置,然后增加锚点属性的X值调整眼球位置;

然后是脸部的其它元素,不展示了,自己画去。

ff5e5718d45c32f8759bfff44836.jpg



接下来是老鼠的尾巴,纯色层》圆蒙板》描边》更改属性,

fcc75718d97932f8759bff4f7c7e.jpg

老鼠身体什么的,随便画一下就好,画完之后放好位置。

最好和眼球放在同一个位置,这里我选择正左方。

08845718d9886ac7254fbcf48255.jpg


然后就是底色了,随便弄个吧,然后蒙板透出眼白和眼皮就行。

bc1d5718d99c32f8759bff70b2f7.jpg

0aa95718d9c732f8759bff0b20e7.jpg

OK。终于搞完所有的元素了。








既然要讲这个AE表达式,那么我就来优(zhuang)雅(bi)地给大家讲吧。

不过我先夸个海口先:

36b857108f926ac72513437b0e6b.jpg

这个GIF,我不打一个关键帧,全部用表达式做。

并且,在工程文件中预览同样在无限循环





好的,以下

726557109e8f32f8758c9b2d3680.jpg








重点介绍:时间表达式time,以秒为单位。

大概就是y=x这么个直线函数吧。


有了这么个东西,我们就可以做各种一次函数了。




我们首先让这只老鼠旋转起来,让尾巴成为身体的父级,然后选中尾巴图层按R,按住Alt点击秒表,会看到右边有中英文,没错这个就是它的属性名称。

33245718da9232f8759bff0f2180.jpg

我们输入time*360,行,现在老鼠就是一秒转一圈了。

更改转速就直接修改数字即可,不过我在这里有个习惯,就是把(time*360)看成一个整体,它意味着一秒一圈。

如果我要加快到1秒2圈,那就写time*360*2。而不是写time*720

这样我就很清楚看到看到是1秒2圈。


如果是要3秒才转完一圈呢?那就应该换算为1秒1/3圈,那就是time*360*(1/3)。

这样子在看的时候就不需要换算可以很清楚地知道转速。

e1445718da786ac7254fbcac6467.jpg













好的,然后就到眼球了,这里要注意,要把眼球的锚点放在眼孔的中心,调整A属性把眼球位置放好。

53e35718db896ac7254fbcaf9cc3.jpg


然后,我们打开左眼右眼的R属性,同样按住Alt点击秒表,但是这次我们不输入表达式,而且用这个父级按钮把这和老鼠尾巴的R属性建立父级关系。

24ce5718dade32f8759bffb9e954.jpg

有意思吧?这样的父级其实也是一条表达式,它就自动生成了,如果需要的话我们也可以去更改。









这样做的好处就是我们只要修改老鼠尾巴的表达式就可以同时控制眼球的转速而不用改3遍了。









搞定旋转的部分就轮到眼皮了,如果眼皮在眼白上层,那就让眼皮随眼球变化,如果眼白在眼皮上层,那就让眼白随眼皮变化。

好吧,不管你看不看得懂,反正我是让眼皮随眼球变化。

我们把眼皮的位置调整好,注意要让眼皮的锚点移到外面,并且对准眼球的中心,调整A属性作为眼皮的高度后,对准整体建立父级,这个父级与之前的有不同之处,大家要注意。

99315718dbfc32f8759bffaff4b7.jpg

80c15718dc556ac7254fbc8a907a.jpg

图中对准的是左眼,所以与左眼建立父级。


建立完父级之后打开R属性,与眼球的R属性再建立父级,在表达式前面加个负号“-”。

1d135718dcad32f8759bffac6cd9.jpg

意思就是眼皮会跟随眼球,但是角度却和它抵消保持0度。于是我们看到的效果就是眼皮随着眼球上下移动,


之前还提到过眼白总是会有半边,所以我们强制级加半边固定眼白给它,放在眼皮层上方。

e8175718dd3332f8759bff4b0dd4.jpg

32fe5718dec132f8759bfff39a6e.jpg


其实现在已经基本完成了,就差底下的文字而已









重点!!!底下的文字,让它播放一遍,很简单,但是要让它循环播放,那就有点难度了。

简单地讲好了,教大家开挂。

图层》新建》空对象,隐藏,把它变成3D层。

b1945718e0356ac7254fbc2a5779.jpg

这两个属性,傲娇又开挂。其它的函数加了时间表达式都是一条直线,它们俩,偏偏不是。

方向属性,加了时间表达式:就会变成锯齿波。

fbdc5718f4db32f8759bffaec9e5.jpg


透明度属性,加时间表达式,就会被限制上下限。

ee9e5718f4606ac7254fbcb3073e.jpg


我们将这两个东西结合,配上不同的系数,就可以做出更多的函数了。







注意,下方内容高速跳跃,请注意重复细看。或者下载附件慢慢看。



文字工具,loading...调整的细节就不讲了,加特效“打字机”

把关键帧删除

35ee5718f7066ac7254fbcd31256.jpg

一般这种特效都是用一个范围选择器,0%~100%,是不是和透明度很像???



da995718f92532f8759bff599e70.jpg

控制关系如下:

方向》不透明度》范围选择器      (上面箭头好像打反了)

这样就形成了这样一个波形。

f8c65718fe2d6ac7254fbcaab6d3.jpg


然后,最后要淡化消失,就是不透明度从100%变成0%


32795718fd7a6ac7254fbcb21980.jpg

这里注意一点,就是那个后面有个[1]表示第二个值。

如果知道什么叫数组的话那应该懂,不懂就自己去百度,没时间解释了,快上车!!!!!



最后给个函数图像算了。

c7f15718fe1632f8759bff6ea2cb.jpg






最后在导出前我还是做了一点调整,不过问题不大啦,自己折腾去...

4ed0571ddabe6ac72538122ccf8d.jpg



时间太紧啦我就不写啦...看懂看不懂都点个赞吧。然后去我首页关注一下呗!

12
Report
|
8
Share
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
大家都在看
Log in