AE加载圆环/小练习+教程

用户头像
北京/UI设计师/6年前/1850浏览
AE加载圆环/小练习+教程

又一次的更新记录来喽,这次做一个旋转的加载动效,这个动效的操作原理是比较简单的,重点是逻辑思维。让我一起来学习吧!

按照国际惯例,让我向大家展示一下效果图的样子哦!

(注:我给大家上传了工程文件哦!大家可以下载了解)

步骤:

1、新建一个项目,然后将该项目另存为...并命名“加载动效”(这是我的命名,大家可以自行命名)

2、新建一个合成命名为“最后效果”,宽度:500px;高度:500px;持续时间为:20s;背景色:#ffffff。

3、新建一个形状图层-“圆形”设置描边颜色:#57BCF0;宽度:40px(注:这些可以根据自己的喜好和圆的大小设置合适的参数)

     可以把“圆环”与“合成”垂直居中对其,注意圆的锚点在圆心位置。

4、编辑“圆环”

   【1】添加“修剪路径”,设置“结束”参数

  【2】设置线段的端点“圆头端点”(是为了美观效果哦!)

(蓝色的框时设置旋转方向的)

为了让大家了解清楚,这里我稍微的解释一下,如下图:

这里设置的大小就是我们成品后旋转出的那个小点。

(这个环形加载动效就是这个小点旋转得到的)

   【3】收起“形状图层1”的参数设置,按“ctrl+D”复制一个。选中上面那个:形状图层2,设置“偏移”的参数。(注:偏移的角度设置时看图形,偏移值正好衔接即可。)心里默默记住这个角度哦!我设置的 是18°。

(这里为了方便大家看,我换了不一样的颜色。红框的位置就是衔接的位置)

   【4】删除刚刚新建的“形状图层2”。好吧,我承认,这个操作就是为了看偏移的度数:18°。


(注:这里偏移的度数最好可以被360整除。

解释一下:最后圆环是要靠这个“小点”复制旋转得到,

我这里的度数是18°,后期就需要复制360/18=20个,后期我需要在复制19个图层)


5、 设置“偏移”的关键帧,并给关键帧增加“缓动”(这个偏移的度数是我们刚开始旋转时的那个“张口”)


(这两个红线间那个开口的距离)

    【1】点击“Home”,使当前时间为00:00:00,点击“偏移”前的秒表,开始这设置关键帧,移动到02s时,设置偏移的度数。

   【2】框选“关键帧”,单击右键,关键帧辅助-缓动。


(可以浏览一下当前效果)

6、按ctrl+D,复制“形状图层1”这里我需要复制19个(具体的计算过程见 4-4 我给的备注 )

7、框选20个图层,按“r”调出旋转参数,依次设置旋转角度,我这里是18°的倍数,让他组成一个完整的圆环,如下图:

(注:这里的正负是和前面设置修剪路径的结束参数时的旋转方向保持一致)

8、设置“序列图层”

     全选20个图层,点击右键“关键帧辅助-序列图层“

     这里设置参数:1s=25帧,总时长为20s。间隔时间为10帧,持续时间为:19.15(总时长-间隔时间=持续时间)


     

     这时的“圆环”只是一个小点,但这不符合我们的要求,所以把时间线先全部移到开始位置。

     框选全部时间线, 按“Alt+[”

      这只是第一步,下面就要开始快速转动你们的大脑喽!

9、 首先,我们可以把“形状图层20”改一个颜色,方便观察。(建议把圆环的描边和图层的标签组都改成统一的颜色,便于观察。)

undefined

(可以看到在运动时,有其他的图层挡住了运动的路径,所有这里需要规整一下图层出现的顺序)

10、当时间轴为“02:00”时,我们观察与“形状图层20”重合的部分,我们标记为黄色,并把下面的形状都标记为黄色,在浏览一遍,可以看到“形状图层20”在0s-2s中正好在黄色在运动。

11、观察到4s时,“黄色”圆环重叠完毕,找到最末尾的形状,和“形状图层20”改为统一颜色。我这里是“紫色。”

12、思考一下,在“紫色”运动时,“黄色”不显示,所以我们设置到04:00时,黄色在出现。

13、同样的逻辑思维,在05:19“黄色”开始运动时,“紫色”应当消失。这样就不会遮挡“黄色”的运动路径。

14、现在调整图层,使我们的图形在运动时时一个完整的圆环。

      把“紫色”全选,按“ctrl+d”复制“紫2”,并全部移到最下面;

      观察圆环的运动,设置在08:00时,“黄色”运动即将结束,“紫色”开始又一轮的运动。所以“紫2”的从08:00时 开始进入。

15、调整播放时长,使我们的图形在运动时时一个完整的圆环。

(注意:我调整了红框圈住的部分)

(注意:1-圆环的颜色改成了统一的颜色,这样比较好观察

2-我可能调整还有一点不衔接,这里需要认真,细心一点)


16、调整完以后,按住"shift"选中所有的图层,预合成,命名为“圆环”

17、给“圆环”添加渐变,使颜色好看一些。

      在“效果与预设”中查找“渐变”,选择“四色渐变”,并拖动到预合成上,调整自己认为好看的颜色。


(颜色1:#FFFF00;颜色2:#00FF00;颜色3:009907;颜色4:007800)


18、添加“阻塞”,实现流动时的粘稠效果。

      在“效果与预设”中查找“阻塞”,选择“简单阻塞工具”,并拖动到预合成上,设置“阻塞”参数。

(注意:1-看阻塞效果时,记得拖动时间轴哦!

 2-在调整“阻塞”参数时,“圆环”会变细,我们可以双

击到“预合成-圆环”中,调整描边的参数,这里我的描边参数为:80)


19、给完成的图形加点投影,美化一下吧!

       这里加投影的方式,我选择了用“高斯模糊”

       按“CTRL+D”复制一个,命名“圆环2“;

      右键:效果-模糊与锐化-高斯模糊;调整模糊的参数。(可以先隐藏上面的图层,方便操作)

      调整“圆环2”的位置和透明度,使其看起来像“投影”

   

     

20、最后,完成喽!让我们看一下最终的效果把。


16
举报
|
22
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
APP/小程序商业项目UI模板|99个高保真UI+79个原型
智能家居中心 简约 UI设计组件库
Security Camera UI kit
高级感金属拟物 UI设计组件库
【新年UI图标】礼物/活动icon
科技医疗透明柜UI界面设计
森系3D渐变流体抽象矢量UI背景图
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
高级表盘系列UI源文件
3D渐变流体抽象矢量UI背景图
【新年UI图标】体育icon
【新年UI图标】美食icon
【新年UI图标】积分icon
新能源APP应用UIKit
户外旅行飞机情侣假日出行
UI通用设计素材1
【新年UI图标】汽车icon
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】活动icon
我的钱包-UI界面设计-app
手表表盘UI系列
新拟态风格 UI设计组件库
UI界面 组件
【新年UI图标】旅行icon
【新年UI图标】钱包icon
你可能喜欢
相关收藏夹
大家都在看
登录注册