|
|
马上注册，，享用更多功能，让你轻松玩转本站。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
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%的弧段也是在不断地改变位置，所以它的循环体不太好找，这也直接导致的循环体持续时间比较长。
不过，只要耐心一点，总会发现规律的。 |
|
/3 
发表于 2018-1-4 11:23:57
微信
收藏
转播
分享
淘帖