IOS动画之玩转贝塞尔曲线

有幸读了A GUIDE TO IOS ANIMATION 这本书,介绍了ios的各种动画,我会将书中项目自己写一遍,将它更新到上.有兴趣的朋友可以一直关注.也可以去支持原版.

我们先来聊聊贝塞尔曲线。贝塞尔曲线的发明人是法国雷诺汽车的工程师皮埃尔·贝塞尔。当年他把贝塞尔曲线应用在了雷诺汽车的设计上。贝塞尔曲线的出现可以说对计算机图形学的发展产生了巨大的推动作用。我们现在得以在电脑上使用Flash,IIlstratorCoralDRAW和Photoshop上制作优美的图形,这其中都离不开贝塞尔曲线的功劳。

原理铺垫:给定n+1个数据点,p0(x0, y0) ... pn(xn, yn),生成一条曲线,使得该曲线与这些点所连结的折线相近。在数学中,这属于逼近问题。在几何中,可以形象地理解为先用折线段连接这些数据点,勾勒出图形的大致轮廓,然后再用光滑的曲线去尽可能接近地拟合这条折线。

最终效果是为这样 

首先我们先从小球的变形开始 

 

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

其中的outsideRectSize 也就是矩阵的边长,这里我定义成了宏 

首先我们要计算,A到c1,B到c2的距离offset,也就是他们的偏移量moveDistance,小点跟大点之间的距离,rectCenter代表矩形的中心点坐标,

-(void)drawInContext:(CGContextRef)ctx{}  描点都放在这里绘图函数中

开始计算A,B,C,D点坐标,这里只要根据中心点和偏移量就能算出来了

最难的就是这里,开始计算小点之间的坐标,c1和c4,c5,c8都是固定的,只需要减去offset就可以了,不懂的同学可以根据上面的图好好看一下.  而其他的移动以后必须要计算偏移量,先要判断失望左边还是右边,先计算等于中间的时候然后再加减偏移量就可以得出.

描绘矩形,这里用UIBezierPath描一个矩形,我就不多说了,都是设置参数.

最后开始接连点,这些都很容易看懂,最后书中也提到了ctx 

代码中的(CGContextRef)ctx字面意思是指上下文,你可以理解为一块全局的画布。也就是说,一旦在某个地方改了画布的一些属性,之后任何地方使用该画布属性都是改了之后的。比如上面在//1中把线条样式改成了虚线,那么在下文//2中如果不恢复成连续的直线,那么画出来的依然是虚线样式。

注意事项: 一定要有进度条,因为计算的时候是根据进度条 .初始化的时候一定要设置进度条.如果你还有疑问可以下载项目看一看.

https://github.com/KittenYang/KYAnimatedPageControl  这是整个项目最终实现的效果.我会一点一点的更新最后完成这个项目.

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