我知道你想学动效【第四期-loading gif 1】

第四期终于出炉啦~

有兴趣的孩子可以关注一下疯子在右工作室的公众号，有空没空我就会发点这样那样的...教程。【个人首页扫码

什么样的loading动画，我会等！点击这个http://链接

前些天看到上面这个微信的推送，里面好多loading gif呀，感觉可以拿来出几期临摹的教程，于是就有了这一期。

这一期我们要临摹的东西是这个loading gif，如下图【注意，是临摹，通过临摹来学习相关的技巧与做法

OK，我们来打开AE，然后把它拖到项目窗口中，再选中它，可以看到它的基本属性，下图红框内。应该都能看懂吧？我们需要看懂的地方：图片大小是400 x 400像素，整个gif时长3秒，每秒50帧。

当然咯，就算是临摹来做也不用做到一模一样的。所以我决定只做三个圈...【嗯，这样既简单又能有区别

新建合成，属性如下，为了方便你们做成微信表情gif还是要稍微小点的。

OK，先来做背景吧，新建一个固态层（纯色），颜色随意。【这里为什么写随意呢？因为后面还可以改

找到"效果和预设"面板，输入"渐变"，然后接"梯度渐变"拉到固态层中（或者选中固态层后双击

好的，它现在变成这样子了了

修改数值，我就直接上图咯，因为是个背景，颜色什么的每个人喜欢的不一样，所以自己喜欢就好...

首先用鼠标点击一下空白的地方，确定没选中任何图层。

选择椭圆工具（注意看红色框

双击，如果顺利的话你就可以得到一个锚点在正中心的200 x 200px 的圆【快捷操作哦，简单粗暴又方便

如果发现你的背景图层变成一个圆形，这是不顺利的情况，说明你在双击前是选中了某个图层，这个时候要用鼠标点击一下空白的地方（这话其实在上面几行里说过一次了

OK，再修改属性吧（原先为200，现在改为20

选中这个形状图层，Ctrl+C, Ctrl+V, Ctrl+V，好的，现在有三层了。

按住Ctrl键点击这三层将他们同时选中，按A，再按Shift+P。（没错我们就是要改他们的锚点和位置属性

可以看到这些数值都是十分整齐和漂亮的，接下来其实全部都是数字的计算了。

我设定的是球的直径是20px，两个球之间的间隔为10px，那么两个相邻的球之间的旋转半径应该等于15px。【不懂的话慢慢理解

修改如下（从左到右为123

选中"形状图层1"，在上方修改它的属性。（填充为白色，效果如下

按住Ctrl把三个形状图层选中，按Shift+R（其实只要把锚点、位置、旋转属性调整出来就可以，怎样按都行

好的，我们来打关键帧吧，直接上图，别说我偷懒。

放大图如下：

注意：

1后面两条红线是为了让你们对时间用的；

2最后面有两个关键帧要手动拉后一帧，因为时间标不到那个位置；

3沙漏状的关键帧是要选中后按F9才变成这样的。

如果稍微再追求点动感的同学，可以把下面这几个东西点开。（运动模糊

怎样导出成GIF就不是我要讲的事情啦...【要不要在新坑里面写写呢？

好啦，做完啦，总结总结啰嗦啰嗦...

好的，啰嗦开始：

聪明点的同学已经知道，其实只是改变旋转属性让他们转起来而已，而事实上也是这样。

上图中的几个地方有两个关键帧贴得很紧，是因为这里要做一个"瞬变"的手法（自己起的名字，别喷），就是在相邻的两帧内对图层的属性作修改但是让它保持不动。像这种例子，前后两帧之间，旋转的中心是不一样的，所以我们要改变它的锚点属性，但是为了让眼睛看不出来我们需要同时改变位置属性。

【其实最后一帧和第一帧之间也有个瞬变，"形状图层2"和"形状图层3"之间瞬间交换，但是我们不用去管它

有心的同学可以去留意和仔细观察一下为什么这样改，如果间隔再大点的话应该怎样改，如果变成4个圆的话应该怎么改，5个？6个？哎呀一样了啦...

OK，发个成品图。【139K，可以做成微信表情发到群上装B哦。。。

大家有想学哪个可以到微信平台上或者在站酷给我留言，我尽能力做一下，别挑太麻烦的呀，本人最嫌麻烦了...