前端实现分屏加载（Loading设计思路分享）

Loading作为一个常见，并且带有排他性的动画，已经被各路大神表现的淋漓尽至。那么如何在众优秀作品下，做出一个性化的Loading动画？

Loading种类：

1.状态类（进度条）：通常数据量很大，客户端已知加载量，并能根据当前加载速度计算出何时加载完成。

状态型的Loading以进度条类为基准，可以为用户提供预期时间，多伴随百分比进度出现。进度条的形式以线性的形式出现，已知总量，降低用户对期待时间的感受。无聊的等待会让人厌烦，作为一个UI设计师需要关注每一个细节，尤其是用户的情绪并将引导到加载后的页面。

By Piotr Adam Kwiatkowski

2.无状态类（菊花）：通常数据量比较小，客户端无法预知加载量。

无状态类的Loaing以菊花为代表，通常都是一组可以无限循环播放的动画。

无状态类的Loaing如有需要可以做的特别一些：https://dribbble.com/search?q=loading

我们的App需要一个无状态的Loading。

我始终相信设计的直觉很重要，抓住直觉的爆发点，是一个成熟设计师必备的素质。于是先按照最初的想法快速做了一版。

相信很多人对这个Loaing眼熟，当然，这肯定不是我们要的效果，不过在制作这Loading的时候不断的推翻自己的想法，时而清醒时而模糊，感觉突然找到了方向但瞬间也可能烟消云散。这种不断反复的过程中还是收获了很多。

既然是无限，循环，表现上就不能过于缺乏趣味，这个度很难把握。形式感上面设计要简单，又要通过最直接的方法创造空间感，偶然间发现马戏团的抛球表演。突然间有了灵感，于是就沿着这个思路开始动手设计：

我尝试去直接模仿抛弃的运动，但是效果并不是很好，但是从Demo中可以看出，值得很入研究。

为此我们搜索了一下现实中的扔球效果：

经过分析我们得出了第一条小球的运动路经是一个无限的符号。

工作路经确定后，导入C4D中进行单球运动轨迹测

由于实例中，小球会受到重力以及加速度的影响，并非匀速运动，但在实际Loading制作过程中，为了视觉效果，我们希望小球做匀速运动

发现问题：小球在中心焦点位置出现明显卡顿

起初我们认为是速度曲线没有调整好所导致的，但我们尝试几版后发现并不是这样，最后我们发现导致这个问题的原因是路经节点问题。

调整节点

通过调整节点后，不难发现，中心焦点处的卡顿明显不见了

为了加强透视效果，我们将球的大小和颜色进行了关键帧处理，这已处理增加的景深对视觉的冲击，使得空间感更强了。

看起来怪怪的。。。。。

为了使整个运动规律更加精准，我们发现运动的起点距离是关键，不懈的追求完美的情况下，总是会有顿悟的时刻，幸运的是找到了问题的所在

三个球匀速运动的情况下，应该保证每相邻两个球之间路经上的距离是相同的。