今天讲解的是利用AE设计复合循环动效图标

制作工具：After Effects (版本7.0+)

目标案例：常见于QQ的导航栏左侧位置

当鼠标移到这里往往会出现动效，我们对此制作循环动画

要求：12帧内完成太阳遮罩旋转、雨点循环运动

制作逻辑概览

一、演示过程

新建画布60*60

选择矩形工具

按住Shift绘制出矩形

进入内容项目>设置参数（圆度和描边）

PS:参数处可用鼠标横向拖拽数值增减

设置调整不透明度为0

设置对齐居中于画布

按住Shift直接在画布上绘制路径

PS：新绘制的路径风格会继承之前的的填充和描边，直接绘制为另起一层

选中这里

复制Ctrl+C粘贴Ctrl+V

用旋转工具快捷键R

按住Shift键拖拽

同样方法可复制旋转多个对象

激活工具属性栏的蒙版选项

绘制圆形，PS里绘制的路径可以粘贴到AE

使用选择工具调整

单个路径也可使用对齐选项

蒙版属性会出现在这里

复制Ctrl+C粘贴Ctrl+V 模式为相减

按住Alt+Shift 拖拽边角

新建个合成

移到路径上增锚点，按住Ctrl拖拽锚点

调整路径复制一个层之后用

另一层调修改透明度

输入描边值

移动太阳到合适的位置

对太阳合成建立反转遮罩

变换>旋转>激活时间图标>起始45度

移动时间轴

旋转90度

遇到时间点，避免相同的一次显示出现而卡帧(因为太阳45度和90度显示重复)空格预览

在同一层绘制三条路径

使用RepeTile(部分版本汉化为平铺)

激活雨水层的位置时间图标

复制图层为了作草稿>移动时间轴到末尾>拖拽雨水层往下方(直至和复制层重叠)

完后别忘删除复制层

避免重复帧将时间点后移

绘制雨水的显示区域

对雨水层调节使用遮罩模式

二、进阶调整

右键新建调整图层放置最上方

使用调节层配合三色工具批量调色

调整虚线能做出雨点 常规情况为渲染>导出png序列

特殊情况程序员希望实现动效是以连图形式交付也可以在AE里处理

新建合成 要求：高度=原高度 且 宽度=帧数X原宽度

拖拽原合成组

也可用对齐工具放左方，右键图层>时间重置>激活时间图标

按规律复制调整时间轴和位置

最后应输出透明图层记得隐藏下方实体层

总结：
知识点重点
               AE图形绘制   遮罩设置
知识点难点
              时间轴关键点建立

本文为源码时代UI老师原创，转载请标明出处（www.itsource.cn）