《A GUIDE TO IOS ANIMATION 2.0》
前阵子看了一本书《A GUIDE TO IOS ANIMATION 2.0》,是一个iOS动画方面的书,感觉讲的不错,但是很多地方没有细节,我也是在一边阅读,一边写成文章,把细节部位帮大家缕出来。说实话 ,动画写起来还是挺有意思的,不像写UI那么枯燥,不像写算法那么,你写过的东西最终都通过动画的方式展现出来!
贝塞尔曲线简介
头一次听,可能以为他和牛顿定律,斐波那契数列一样是由一个名字叫贝塞尔的人发明的,然而并不是。其实贝塞尔曲线的数学基础最早是1912年就在当世广为人知的伯恩斯坦多项式,那什么又是伯恩思坦多项式呢,简单地说,伯恩斯坦多项式是用来证明,在 [a, b]区间上所有的连续函数都可以多项式来逼近,并且一致收敛,再简单地说,就是在一个连续函数,你可以将它写成n个伯恩思坦多项式相加的形式,并且随着n 趋向于无穷大,这个多项式将一致收敛到原函数。
听不懂,没关系,继续往下看。
虽然在1912年就已经被发现,但是其对图形的适用性在半个世纪内者也没有被实现,直到1959年在雪铁龙汽车就职的数学家 Paul de Casteljau,开始对伯恩斯坦多项式进行图形化的尝试,并推出一种新的数值稳定(即在求伯恩斯坦多项式的时候不会引入数值误差)递归算法 de Casteljau 算法用来伯恩斯坦多项式。根据这个算法,就可以只通过很少的控制点,去生成复杂的平滑曲线,也就是贝塞尔曲线。 而贝塞尔曲线的成名,得益于法国工程师 Pierre Bézier ,他将这种算法用来辅助雷诺汽车的车体工业设计,并且得到广泛宣传。
(具体贝塞尔语法在实践中讲述)
源码地址
我的github : https://github.com/290138645/RLAnimation.git
实现效果
代码实现
通过上图可以看到效果, 直观的感觉小球发生了形变。所以可行的做法就是:我们用4条贝塞尔曲线出这个小球的形状。有了这四条单独的曲线,然后,我们只需要单独控制每条贝塞尔曲线的形状,实时调用layer的[self setNeedsDisplay] 以重绘-(void)drawInContext: (CGContextRef)ctx方法,就可以间接地实现控制小球形状的目的了。
首先我们需要确定外圈这个矩形,还需要判断是左滑还是右滑,再接着确定A,B,C,D四个点.在确定路线c1,c2,c3,c4,c5,c6,c7,c8的位置将他绘制出来
在pointA-c8上位置画一个点,方便观察运动情况
设置progress改变圆球的运动轨迹
最后将layer赋值给View,并在vc中实例化出来
最后希望大家自己动手敲一遍,后面我也会继续更新,如果有喜欢的同学可以关注一下
扫描下方公众号关注最新更新