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