GrasshopperLoading

蚱蜢加载动画

a loading animation with a grasshopper effect

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

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

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

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

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

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

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

Realank/GrasshopperLoading

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages