iOS毛虫动画

第一次在写文章，就先写一篇技术分享吧。

在工作中我实现了一个类似毛虫的iOS动画效果，并不是很难，但是这个过程还是挺令人回味的，记录并分享给大家，而且让我想起一个有趣的现象：为程序员，你可能会发现时不时还是要动用你高中的数学知识解决实际问题。代码见Github

1，最终效果：

我在做滑动菜单的时候发现了一种很有趣的实现方式，菜单下方用来标注当前选中菜单项的红条，可以产生一种黏黏的迟滞效果，而且这种粘滞是随着手的滑动跟随变化，像一只毛虫。如下

2，动画解构

我们来分析这个动画，实现的思路不止一种，但后来笔者发现一种比较简单易懂的。这个红条的变化，可以分解为两个部分，

a， 增长的部分， （绝对值前期增长快，后期增长慢）

b,    缩减的部分，（绝对值前期增长慢，后期增长快）

于是我们大致可以在一个坐标轴上用曲线描述出来，二者间的差值就是红条总长度变化的过程

时间变化曲线

3，数学描述

下一步就是把这两根曲线用数学描述出来，第一眼可能说不出来，但是加两根辅助线就好了，如图，原来可以认为他们是两个1/4圆弧。

加了辅助线之后

横轴是时间，纵轴是长度，圆弧半径实际上等于红线静止长度，因为我们最后算出来的都是比例数值，所以可以假设半径等于1

就有了两个公式

(1-x)/1 = cosα

y/1 = sinα

得到  y = sin(acos(1-x));  这不就是解三角形么。

依此类推，另一条曲线的数学描述就是

x/1 = sinβ

(1-y)/1 = cosβ

y = 1 - cos(asin(x))

写成代码，大功告成，实际上只有两行代码是关键，具体实现请见 Github上。