Loading动效

工具

AE（Adobe AfterEffect 2018）

分析和实现思路

首先对动画进行分解。主体运动可以分为两个部分。

分别标记五个滑块

（1）滑块A的运动

滑块A的运动比较简单，是一个加了缓动的直线运动。经过尝试，缓动曲线调整如下。

滑块A的直线运动缓动曲线

（2）滑块B，C，D，E的运动

每个单独的滑块都是一个绕固定点的旋转运动，然后加上一个挤压和拉伸效果。

① 旋转运动的实现

以滑块B为例，将B的锚点b放置在A,B间。当A开始运动时，使滑块B绕b点逆时针旋转180°。

B的锚点b放在AB中间，使B绕b点逆时针旋转180°

旋转轨道默认为圆形轨道，由于B运动半径问题，B在旋转过程中会撞上A。

在旋转中，调整路径B的高度，防止两个滑块相撞。

调整路径B的高度

② 挤压和拉伸效果

在形状路径里调整物体大小，注意形变时，物体体积不应发生变化。

变形前

变形后

注意：大小变化时，实际物体会以中心点为变化点，所以高度会向上变化，需要调整过来。

补充：

关于挤压和拉伸：挤压和拉伸可以体现运动物体的柔软度，形变越大，物体给感觉越柔软。

挤压和拉伸，《生命的幻象》[美] 弗兰克·托马斯   

③ 返回时的运动

由于这个运动是个对称运动，因此返程的时候，可以复制粘贴前半部分关键帧，再应用时间反向关键帧。实现快速复制关键帧运动。

同理依次将其他几个滑块排列开来。

（三）其他部分的效果处理

运动模糊：

单个滑块添加运动模糊。

渐变：

预合成，添加生成-四色渐变，修改颜色。

阴影：

复制预合成，模糊-高斯模糊。减弱透明度，调整位置。

涉及到的快捷键

R：打开旋转属性

U：展示关键帧

F9：添加缓动

涉及到的知识点

运动图表编辑器：

滑块的运动曲线设置。

运动图表有两种，一个是值-时间图，一个是速度-时间（V-T）图。

一般调在V-T图里调整整缓动曲线。

缓入缓出曲线

各种缓动曲线

弹性缓动曲线

锚点位置：

（1）AE的所有形状运动都是关于锚点的运动（涉及到滑块运动的位置计算）

（2）锚点控制可以下载Motion2插件。

其他遗留问题：

AE的速度方向辨别很奇怪？有些情况下往返会显示正负，有些情况下往返都为正值。感觉应该和速度方向（起始点位置）有关，可能关键帧的位置属性会影响到AE速度曲线的方向判定。待研究。