安卓篱笆

标题: Ae小案例——腾讯体育加载动画 [打印本页]

作者: GuiTarvvm2098 时间: 2018-1-4 11:23
标题: Ae小案例——腾讯体育加载动画
Hello！大家好，我是小申羊，这应该是头条Ae案例的第三篇文章了。

Loading
写在前面

今天给大家带来的案例是：加载动画1，加载动画的种类有很多，主要用于UI设计，当我们手机网速不好时，经常会看到一些加载动画，今天要做的这个加载动画源于腾讯体育，因为我平时比较喜欢看NBA，所以当遇到网速不好的时候，就会跳出这个加载动画，这个动画挺有意思的，做起来呢，也费了不少工夫。

废话不多说，先看效果图：

最终效果
最终的效果就是这样子，我只录了5秒的gif，其实一个循环下来有20秒，这种加载动画肯定是要做成循环的，要不然就没有意义了，只是这个加载动画的循环体有点长...

说明

1. 这个加载动画灵感源于腾讯体育，应该还有其他App也用类似的加载动画，从思路分析到动画制作全部由我自己完成。（虽然方法比较笨，但好歹效果出来了）

2. 我是用Ae CC 2013制作的，获取源文件的方式我就不写了，否则审核会不通过的，大家应该都懂哈。（为什么总是要强调软件版本呢？因为高版本做出的东西低版本是打不开的，其实我电脑里还装了一个Ae CC 2015...）

4. 最后，这个案例，我觉得我的思路分析没问题，当然，这个制作方法也是没问题的，毕竟最终效果做出来了，但是整个制作过程稍微有些繁琐，这也是没办法的事，以我目前的水平来说，这就是我所能想到的唯一方法，等以后技术有了长足的进步，再来重新制作一次。

教程正式开始：

思路分析（关键）

1. 首先我们可以看出：整个加载动画是一个没有封闭的圆环在旋转，而且很有规律性。

2. 首先圆环从无到有，运动到整个圆弧长度的75%，圆弧段达到最大值。

3. 到达最大值之后，圆环长度又开始减小，减到最小值15%；

第一个场景
4. 在上面整个过程中，圆环这个整体并不是静止的，它也在旋转着，旋转了90度。

5. 在这之后，接下来的动画都是从圆弧段的15%开始运动，中间达到最大值75%，最后又回到了15%的状态。

第二个场景
循环分析

1. 首先可以肯定的是，这个加载动画肯定是循环动画，这是毫无疑问的。

2. 由于圆环整体还在不停旋转，所以，虽然每次动画结束都是15%的状态，但是结束时的位置确并不相同。（这也是这个动画的精髓）

（1）第一秒结束时的位置：

第一秒结束的位置
（2）第2秒结束时的位置：

第二秒结束的位置
3. 最小弧段占整个弧段的15%，换算成角度，就是：360*0.15=54度，也就是说，最小弧段所对应的角度是54度。

4. 我们用360/54，发现并不能整除，然后再用720/54，发现还是不能整除；于是，再用1080/54，结果刚好为20。（即：循环体是由20段小动画组成的）

5. 所以，从第二个位置起，再经过20次运动才能最终再次返回到第二次运动的起始位置。

6. 如果每段位置我们设置动画持续时间为1s的话，20段的重复动画+最开始的从无到有的动画，总共是21段，所以整个合成的时间长度为21s。（循环体为后面20段，因为第一段从0-75%；而后面的都是从15%-75%）。

关于修剪路径

1. 形状图层是Ae中的图层之一，其功能非常强大，因为形状图层自带了许多修改器，我们可以根据需要添加不同的修改器，做出非常漂亮的MG动画。

2. 我们今天的加载动画就用到了形状图层的修剪路径（trim paths）

需要指出的是：修剪路径大多应用于对象的描边路径。（也就是说，你所看到的圆环并不是填充，而是描边）

修剪路径主要有3个参数：

（1）start

控制起始点，文字不太好描述，一上图就懂了。

start
（2）end

同理，这个是控制结束点的，大家看图。

end
（3）offset（偏移）

这个是控制整个路径偏移的参数。

offset
最后，如何添加修剪路径？

trim paths
点击右侧那个三角按钮，找到Trim paths（修剪路径）

给圆环上色

我们可以在制作一开始就给圆环上色，当然，如果你已经完成了，才发现忘记给圆环上色，这也没关系，我们通过添加一个渐变的特效，同样可以实现上色。

给图层（合成）加渐变的姿势：

选中图层，右击，在弹出的菜单中选择：effect-generate-gradient ramp

渐变特效
关于好的渐变搭配，这里我给大家推荐一个不错的渐变配色网站：

https://webgradients.com/

打开之后这这样的：

配色网站
整个界面非常直观大气，方框里面是16进制的色彩数值，直接双击，即可全部选中，之后ctrl+c复制下来，直接粘贴到Ae中取色器对应的位置即可。

动画制作

1. 经过上面的分析我们知道，第一段动画跟其他不一样，因为它是整个动画的开始，是从圆弧段的0%-75%，所以要单独添加。（请看下表）

2. 第二段动画也要单独添加，因为它是循环体的开始，后面的动画都和第二段的动画相同，我们要复制第一个形状图层，在第二个形状图层上添加第二段动画。（有几点注意事项，请看下表）

3. 后面的动画简单了，直接ctrl+D复制图层，并且修改图层的入点和出点，然后再修改旋转属性的数值即可。

4. 看到这里大家可能有点懵，没办法，图文教程不可能面面俱到，大家拿到源文件后应该能看明白的，我已经尽可能地把它描述清楚了......

总结

这个动画可能和一般的加载动画有些不同，特殊之处在于：由于整个圆环整体还在不停地旋转，所以它最终显示的15%的弧段也是在不断地改变位置，所以它的循环体不太好找，这也直接导致的循环体持续时间比较长。

不过，只要耐心一点，总会发现规律的。

欢迎光临安卓篱笆 (http://www.okapk.cn/)