所有分类
  • 所有分类
  • VIP素材
  • APP模板
  • 图标
  • 插画
  • 样机

loading动效AE教程

 

大家好久不见了,銮銮这次给大家带来一个AE小教程,该Loading效果来自Dribbble的 Aaron Iker的作品。这个loading不仅好看,还容易制作。我不但会教会你们怎么制作 还会教会你们如何导出透明背景的GIF图。那么现在开始啦!

 

 

 

1、打开AE,在项目区——鼠标右键——新建合成

 

 

2、合成设置,数值如下图所示(刚开始接触AE的同学,直接照着填写就可以了)

 

 

3、完成合成设置后,出现类似PS中的画布。

Ctrl+R 显示/隐藏标尺

Ctrl+鼠标滚轮可以缩放画布大小

按住空格键,鼠标左建可以拖拽画布位置

 

1、先选择左上角的图形工具,按住Shift键在画布上画一个正方形,画完后,可以将填充 改成描边

 

 

 

2、用同样的方法再画一个正圆形

 

1、先给正方形添加修剪路径

 

 

2、调整修剪路径中的数值,顺便在时间轴的第0秒时候,将“偏移”左边的icon点亮

注意:只有第一帧需要手动点亮,从第二帧开始,只需拖动时间手柄和调数值,就会自动打上

 

 

3、打开矩形图层——内容——矩形——矩形路径——圆度

 

 

4、打开矩形图层——内容——矩形——描边——线段端点——圆头端点

 

 

5、现在开始打帧调动画啦!

这次主要靠“修剪路径”中的“偏移”来实现效果,刚刚我 们已经打了第一帧,现在接着打完后面的帧啦哈哈哈

 

 

①上图是第一帧的效果,接下来通过调整“偏移”的角度来打第二帧,记得是先调时间手 柄,后改“偏移”的数值。帧之间的间距越小,速度越快;间距越大,速度越慢。 具体看下图

 

 

②第三帧

 

 

③第四帧

 

 

④第五帧

 

 

现在打完所有帧后,注意时时间最好不要超过3秒,超过的话,动作会太慢,看起来卡。

 

6、AE小常识

 

 

7、现在大家可以按空格键,看看运动效果。不知道大家有没有发现现在的运动规律太生 硬,接下来让运动规律更自然一点。先全选 所有帧——鼠标右键——关键帧辅助——缓动

 

 

8、方形你都做出来了,圆形还能难倒你嘛。接下来把圆形的帧打起来哈哈哈,圆形的帧 跟方形的帧是同一个位置,因为它们是同步运动的。而圆形调的是“位置”的数值,比 方形简单多了。

 

 

① 第一帧

 

 

② 第二帧

 

 

③第三帧

 

 

④ 第四帧

 

 

⑤ 第五帧

 

 

9、接下来让运动规律更自然一点。

除了第一帧全选后面 所有帧——鼠标右键——关键帧辅助——缓动

 

 

1、先用鼠标单击选中编辑区,接着在左上方点击“合成”——“添加到渲染队列(A)”

 

 

2、设置渲染队列

①“输出到”——选择视频储存位置和修改文件名字

②“输出模块”——选择视频输出格式

③“渲染”——导出视频

 

 

3、成功导出视频后,其实还没结束哈哈哈。接下来把视频导入到PS中 打开PS——导入——视频帧到图层(F)… 默认设置后点“确定”

 

 

4、点击 文件——导出——储存为Web所用格式(旧版)…

“预设”——GIF 128 仿色

“存储”——选择存储位置

“完成”——导出透明GIF

 

 

恭喜大家终于完成这个作品啦!只要大家按照步骤做,一般不会出现什么特殊情况。如果 过程中出现特殊情况,可以留言问我或者问百度哈哈哈。最后希望大家能举一反三,头图 中的三角形和圆形的loading制作原理是跟方形一样的,只是形状不一样而以。 而导出透 明背景的GIF图 是为了方便程序猿内置在APP中。减轻程序猿的工作负担。

 

最后欢迎各位交作业啦~只有动手做了才会深深的记在脑海里喔!加油喔!

 

原创作者:Aaron Iker

原图链接:https://dribbble.com/shots/5878367-Loaders

教程作者:解答团-銮銮

 


 

本页地址:https://www.uime.cn/28700.html; 所有素材与文章均来自于互联网,经网友投稿后发布,如有侵权,请联系 99898566@qq.com。如果下载失败可提交工单哦。
0
分享海报

早鸟限时特价,年会员半价,限量1000份哦

点击购买

没有账号?注册  忘记密码?