用 Photoshop 时间轴3分钟完成简单的 loading 动画

动效设计一直是我想学但又没时间系统学习的一个技能，因为想要学好 AE 这个软件确实是需要很多的时间和精力，但是如果工作中有一个紧急的需求，需要设计师快速出 gif 图，这个时候用 Photoshop 的时间轴就能在3分钟内搞定。

下图是我用 PS 导出的 loading 动画，接下来我就详细说明一下步骤：

loading动画

1-首先，新建一个980×330的画布，在窗口中打开时间轴面板。

新建画布

2-用形状工具绘制3个300×300px的圆，水平居中分布。

实际上我设计图中这个动画的圆最大只有50px，之所以在 PS 中放大了6倍，是因为 PS 导出 gif 很容易产生毛边，影响实现效果，所以尽可能放大几倍来画。（在交付切图文件给前端的时候，尽量都用2x的图，这样在 retina 屏上就不会模糊。也是同样的道理。）

3-将三个圆的形状图层转换为智能对象，因为形状图层现在还不支持针对大小的关键帧变化

转换为智能对象

4-对第一个圆设置关键帧，时间轴移到第一帧（00f），点击“变换”前的小时钟，选择第一个圆，control+t，使之缩小到0px；然后将时间轴移到第二帧（01:00f），再将圆放大至300×300px，这时会自动出现一个关键帧的标记；最后将时间轴移到第三帧（02:00f），再将圆缩小至0px。

三个关键帧

这时候三个关键帧就设置好了，注意，放大和缩小的时候中心点一定要固定不变。

5-同样的道理，完成另外两个圆关键帧的设置，两个圆之间的关键帧时间间隔必须保证相同，我这里的时间间隔是05f，即圆1\圆2\圆3第一帧的时间分别是00f\05f\10f。

6-这样一个简单的 loading 动画就做好了，单击空格键预览一下，开启循环播放，将时间轴帧速率设置为15fps。

7-最后一步，将背景图层删掉，导出-存储为 web 所用格式，gif 格式，颜色256，将循环选项设为“永远”。搞定~

导出