第一次在简书写文章，就先写一篇技术分享吧。
在工作中我实现了一个类似毛虫的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上。
网友评论