AE怎么制作圆形波纹加载动画-AE制作圆形波纹加载动画教程
作者:SunnyJourney
时间:2026-07-31
浏览:0
在UI动效设计、短视频运营和新媒体物料制作中,圆形波纹加载动画一直是一个高频需求。许多新手认为在After Effects中制作复杂动效门槛较高,实际上仅使用内置功能,无需第三方插件,十几分钟即可完成一个流畅的商用级效果。下面将拆解具体的制作步骤。 任务目标 使用After Effects制作一个简
在UI动效设计、短视频运营和新媒体物料制作中,圆形波纹加载动画一直是一个高频需求。许多新手认为在After Effects中制作复杂动效门槛较高,实际上仅使用内置功能,无需第三方插件,十几分钟即可完成一个流畅的商用级效果。下面将拆解具体的制作步骤。
任务目标
使用After Effects制作一个简约自然的圆形波纹循环加载动画,最终输出为带透明背景的视频文件,可用于UI加载、短视频转场、活动海报弹窗等场景。
最终成果
一个4秒循环播放的圆形波纹扩散动画,包含4个依次扩散并消失的正圆,带有缓动效果,导出为QuickTime格式并保留透明通道。
适用软件和版本
After Effects(版本不限,基于内置功能操作)
准备材料
- After Effects软件
- 无需外部素材,全程使用形状工具绘制
新建项目
- 打开After Effects,新建一个合成。
- 在合成设置中,将宽度和高度均设置为1080像素,即1080×1080的正方形尺寸,该尺寸适配大多数加载场景的显示需求。
- 将帧速率设置为30fps。
- 将时长设置为4秒,以满足循环动画的时长需求。
导入素材
本任务无需外部素材,所有图形元素均在After Effects中直接创建。
核心操作
绘制基础图形
- 选择形状工具中的椭圆工具。
- 在工具栏中将形状填充设置为关闭状态。
- 将描边设置为纯色,粗细为10像素。
- 按住Shift键,在合成中心绘制一个正圆。绘制完成后,使用对齐工具将正圆对齐到合成中心。
- 复制该形状图层3次,得到4个大小、样式完全一致的正圆图层。这些图层将作为动画的基础框架。

添加关键帧制作扩散效果
- 选择最上方第一个正圆图层,展开其变换属性。
- 在时间轴0秒位置,为缩放属性添加关键帧,数值设置为100%;为不透明度属性添加关键帧,数值设置为100%。
- 将时间轴移动到1秒位置,将缩放数值调整为220%,不透明度数值调整为0%。此时,软件自动生成第二个关键帧,第一个正圆的扩散消失效果即完成。
- 为其余三个正圆图层重复相同操作,但需要将每个图层的关键帧组整体依次向后错开0.25秒:
- 第二个正圆:从0.25秒开始扩散,1.25秒结束。
- 第三个正圆:从0.5秒开始扩散,1.5秒结束。
- 第四个正圆:从0.75秒开始扩散,1.75秒结束。
- 完成关键帧错开后,全选所有图层,右键选择预合成,将预合成命名为圆形波纹。
- 在时间轴中选中圆形波纹预合成图层,按住Alt键点击时间属性旁边的秒表图标,在表达式编辑器中输入
loopout(),即可实现无限循环播放,无需手动复制关键帧。

参数调整
添加缓动效果
- 全选所有关键帧。
- 按下键盘上的F9键,为关键帧添加缓动效果,使波纹扩散从匀速运动变为先快后慢的节奏,更符合真实的视觉体验。
增加设计层次感(可选)
- 可以调整四个正圆的描边透明度,从浅到深依次设置,形成渐变层次。
- 可以为每个正圆更换不同的渐变色描边。
- 可以在合成中心添加一个实心小圆作为锚点,并为其添加缩放动画,幅度约为10%,形成呼吸感,使整体质感更灵动。

保存项目
在After Effects中,选择文件 > 保存,将项目文件保存为.aep格式,以便后续修改。
导出设置
- 选择合成 > 添加到渲染队列。
- 在渲染队列中,将输出模块设置为QuickTime格式。
- 在通道选项中,选择RGB+Alpha,确保导出文件包含透明背景,便于开发或设计人员直接使用。
- 设置输出路径和文件名,点击渲染开始导出。
结果检查
- 播放导出的视频文件,确认动画以4秒为周期循环播放,且波纹扩散效果流畅无卡顿。
- 将视频导入到支持透明背景的软件中,确认背景区域为透明,正圆波纹正常显示。
可复用方法
这种制作方法逻辑简单,通过修改正圆的大小、描边颜色、扩散速度,即可适配UI加载、短视频转场、活动海报弹窗等多种场景。核心思路是:使用形状工具绘制基础图形,通过错开关键帧时间形成节奏,利用预合成加循环表达式实现无限循环。这是动效设计师制作简约加载动画的常用方法,新手可以快速上手并灵活调整。
作者最新文章
图几
2026-09-16 17:43
SQL中ROUND函数对0.5的处理机制及强制四舍五入方法
2026-09-15 14:19
JS金额计算怎么避免四舍五入误差
2026-09-14 17:32
韩国8月携号转网数据:Galaxy Z8系列iPhone用户转化率约为Z7系列2倍
2026-09-08 17:02
AE基础教程:如何创建合成并制作关键帧动画
2026-09-04 09:27
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多


































