提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
先放一下效果图
一、背景介绍
这个小汽车加载动效我之前发过作品,那时让想学的小伙伴给我留言,我可以出个教程,然而过了几个月都没有小伙伴给我留言,我也没在意,哈哈。最近忽然有小伙伴微信加我说在等我的教程,我其实受宠若惊啊!AE我是在网上摸索自己学的,到现在会的还是比较基础,这个动效一些细节做的还不是很好,在这里我只是分享制作的方法。AE主要还是调细节,分析思路,没有一开始想象的那么难,所以想要学AE的小伙伴不用太担心哈~,本教程如有不妥,希望大家积极指正。
二、制作思路分析
做动效除了掌握技能之外,最重要的就是清楚动效的实现方式,即分析每个阶段的路径。首先我不想让动效做的太简单,所以考虑让小汽车从无到有再消失,期间还有速度的变化。
三、实现的方式
1.剪切蒙版
用到剪切蒙版,让元素出现在你想出现的区域。
2.动效的实现
无论加速还是减速,实质上都是位移的关系,在AE表现为position的变化。加速就是在同等时间内平移的长度加大,减速就是同等时间内平移的长度减小,匀速就是在原地。背景作为衬托,理应跟汽车速度的变化而变化。当然是在汽车进入画面的时候开始动起来。
四、素材的准备
需要单独做动效的部分都应当独立成一部分方便操作。
这里需要的元素有APP背景页面,长街道背景(具体长度根据你可视区域大小、动效时长、运动速度来定),车身,前轮,后轮
五、动效制作
做好分析准备以后,我们就开始着手做动效了(教程里的具体数值设置可根据具体情况而定,常常出现照搬也做不出来一样的效果,可能是哪里出现了问题)
1.新建合成
2.给新建合成设置参数
这里的合成大小主要取决于APP背景的尺寸大小,数值设置仅供参考。
3.直接把准备好的素材拖进合成里
初始位置都是居中放的,所以需要手动调整到自己想要的位置上,做好布局
4.布局好以后开始规划可视区域
首先用矩形工具画出一个矩形,作为可视区并放置在你想显示图层的上一个图层,显示图层在TrkMat上选择第一个Alpha通道
5.设置速度
背景跟车的速度连动,两个车轮和车身的速度一致,所以实际上只需要设置两个元素的位移即可,那就是长街道背景图和车身车轮三选一。具体的设置数值我就不标出来了,主要还是靠大家去体验,去调整,才更能理解其中的含义。
6.车轮转动
车轮的前进设置它的转动即可,这里设置旋转60,累计增加,加速的过程也是关键帧的密度加大。
7.文案的设置
汽车加载过程中,文案显示“努力加载中,请稍后…”,加载完成后显示“加载完成”
此时小汽车已跑到可视区外面。
8.导出GIF动图
我之前一直用的PS导出GIF动图,但是PS导图稍微有点局限(PS很6的同学请忽略哈),最近发现了一个很好的用的AE插件,导出的GIF不仅没有白色描边,还能以更小的体积显示更清晰的画质,那就是GifGun,文末会有下载地址
本教程不着重手把手按部就班设置参数,主要给大家分享我做动效时的思考方法和步骤,具体的参数大家在摸索的过程中能更深入地把握原理,不过文末我还是会把本教程的源文档分享给大家,仅供大家学习使用,算是一个小彩蛋吧!
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册