蚱蜢加载动画

a loading animation with a grasshopper effect

###原理： 首先，要完成这个动画，我们需要分析它有哪些需求：

需要有三种颜色的线段（当然是贝塞尔曲线） 动画的完成，使用核心动画无法完成 这个动画是周期性的 基于需求1，我们没有办法使用CAShapeLayer，因为CAShapeLayer画的图形，只有一种颜色，或者是渲染出来的过渡色，不能做到上面的三种颜色。所以我们使用Core Graphics自己绘制线段 那么我们怎么样让动画动起来呢？使用CADisplayLink。这种接近硬件刷新级别的计时器，可以让我们制作流畅的动画，我们内部维护一个最大值为1000的数字，随着定时器的滴答来“自加”。

在1000个计数周期中，整个动画完成单次循环。

下面我们对动画进行分解。

####1）首先是弧形 路线是一个半圆，角度从－PI到0。一次动画循环，分为两部分。我们设这两部分是动画进度的percent00.5，和进度的percent0.51。 上半部分，弧形从－PI角度为起点，角度递增，到percent0.5的时候，正好是一个上半圆。 下半部分，弧形从完整上半圆开始（－PI起点，0终点），开始起点不断增加，到percent 1的时候，弧度夹脚为0，都落在了0角度。

####2) 其次是平移 我们可以看到，整个动画似乎是在往前走，原因是，在percent 0的时候，弧度的起点在中心位置，等到percent 0.5的时候，弧度的圆心在中心位置，当percent 1的时候，弧度的终点在中心位置。不断的循环，给人向前跑的假象。

其实画图讲解更好，但是实在太麻烦了，大家可以自己动手画画，其实并不难～～