iOS 动画篇---玩转贝塞尔曲线(一)

《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 ,他将这种算法用来辅助雷诺汽车的车体工业设计,并且得到广泛宣传。

\color{rgb(255,0,0)}{下面进入主题}(具体贝塞尔语法在实践中讲述)

源码地址

我的github : https://github.com/290138645/RLAnimation.git

实现效果

圆形动画.gif

代码实现

通过上图可以看到效果, 直观的感觉小球发生了形变。所以可行的做法就是:我们用4条贝塞尔曲线\color{rgb(255,0,0)}{[拼]}出这个小球的形状。有了这四条单独的曲线,然后,我们只需要单独控制每条贝塞尔曲线的形状,实时调用layer的[self setNeedsDisplay] 以重绘-(void)drawInContext: (CGContextRef)ctx方法,就可以间接地实现控制小球形状的目的了。

image.png
image.png

首先我们需要确定外圈这个矩形,还需要判断是左滑还是右滑,再接着确定A,B,C,D四个点.在确定路线c1,c2,c3,c4,c5,c6,c7,c8的位置将他绘制出来

code.png

在pointA-c8上位置画一个点,方便观察运动情况

code.png

设置progress改变圆球的运动轨迹

code.png

最后将layer赋值给View,并在vc中实例化出来

code.png

最后希望大家自己动手敲一遍,后面我也会继续更新,如果有喜欢的同学可以关注一下
扫描下方公众号关注最新更新

公众号扫描二维码.png

你可能感兴趣的:(iOS 动画篇---玩转贝塞尔曲线(一))