UIBezierPath基础篇

由于项目中要加入一个类似于购物车的抛物线动画的需求，开始研究了下贝塞尔曲线的相关内容，首先了解下UIBezierPath基础。

UIBezierPath基础
使用UIBezierPath类可以创建基于矢量的路径，这个类在UIKit中。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状。

使用
UIBezierPath的使用
1.创建UIBezierPath对象；
2.调用moveToPoint设置初始路径的地点；
3.添加line(线)或者curve(曲线)去定义一个或者多个subpaths(子路径)；
4.设置UIBezierPath对象绘制的相关属性，例如填充颜色、填充样式、画笔属性等。

创建UIBezierPath方法

+(instancetype)bezierPath;
+(instancetype)bezierPathWithRect:(CGRect)rect;
+(instancetype)bezierPathWithOvalInRect:(CGRect)rect;
+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
                        cornerRadius:(CGFloat)cornerRadius;
+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
                    byRoundingCorners:(UIRectCorner)corners 
                          cornerRadii:(CGSize)cornerRadii;
+(instancetype)bezierPathWithArcCenter:(CGPoint)center 
                             radius:(CGFloat)radius 
                         startAngle:(CGFloat)startAngle 
                           endAngle:(CGFloat)endAngle 
                          clockwise:(BOOL)clockwise;
+(instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

通过上面这些工厂方法可以创建任意类型的的图形，下面具体介绍下它们的用途

1.+(instancetype)bezierPath 创建UIBezierPath对象，根据我们的需求画任意样式的图形；
2.+(instancetype)bezierPathWithRect:(CGRect)rect 根据一个矩形画贝塞尔曲线；
3.+(instancetype)bezierPathWithOvalInRect:(CGRect)rect 根据矩形画内切曲线，例如圆或者椭圆；
4.+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
                        cornerRadius:(CGFloat)cornerRadius 根据矩形画带圆角的矩形；
5.+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
                    byRoundingCorners:(UIRectCorner)corners 
                          cornerRadii:(CGSize)cornerRadii 根据矩形制定一个角为圆角；
6.+(instancetype)bezierPathWithArcCenter:(CGPoint)center 
                             radius:(CGFloat)radius 
                         startAngle:(CGFloat)startAngle 
                           endAngle:(CGFloat)endAngle 
                          clockwise:(BOOL)clockwise这个方法用来画弧，五个参数分别代表弧线中心点的坐标、弧线所在圆的半径、弧线开始的角度、弧线结束的角度、是否顺时针画弧线条。

Ps：我们需要在- (void)drawRect:(CGRect)rect中创建UIBezierPath对象并且调用以上工厂方法，因为在drawRect方法中我们才可以获取到上下文。

画直线

// 创建path
UIBezierPath *path = [UIBezierPath bezierPath];
//添加路径(起点(100,100)到终点(200,100)的线段)到path
[path moveToPoint:CGPointMake(100 , 100)];
[path addLineToPoint:CGPointMake(200, 100)];
//将path绘制出来
[path stroke];

效果图：

屏幕快照 2016-10-25 下午4.16.43.png

画三角形

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(20, 20)];
[path addLineToPoint:CGPointMake(self.frame.size.width - 45, 20)];
[path addLineToPoint:CGPointMake(self.frame.size.width - 45, self.frame.size.height - 20)];
[path closePath];
//设置描边宽度
path.lineWidth = 2;
//设置填充颜色
UIColor *fillColor = [UIColor cyanColor];
[fillColor set];
//填充
[path fill];
//设置画笔颜色
UIColor *strokeColor = [UIColor orangeColor];
[strokeColor set];
//描边
[path stroke];

Ps：注意填充颜色、画笔颜色的顺序，先设置填充颜色再设置画笔颜色。

效果图如下：

屏幕快照 2016-10-25 下午4.29.27.png

画矩形

UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.height - 40)];
path.lineCapStyle = kCGLineCapRound;   //线条拐角
path.lineJoinStyle = kCGLineJoinBevel; //终点处理
path.lineWidth = 2;
//设置填充颜色
UIColor *fillColor = [UIColor yellowColor];
[fillColor set];
//填充
[path fill];
//设置画笔颜色
UIColor *strokeColor = [UIColor orangeColor];
[strokeColor set];
//描边
[path stroke];

代码解释：

1.lineCapStyle属性是设置线条拐角帽的样式
 kCGLineCapButt   默认的
 kCGLineCapRound  轻微圆角
 kCGLineCapSquare 正方形

2.lineJoinStyle属性是设置两条线连接点的样式
kCGLineJoinMiter 默认的表示斜接
kCGLineJoinRound 圆滑衔接
kCGLineJoinBevel 斜角连接 

效果图：

屏幕快照 2016-10-25 下午4.46.13.png

画圆

//注意需要传入正方形
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(60, 60, 150, 150)];
path.lineWidth = 2;
//设置填充颜色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
//填充
[path fill];
//设置画笔颜色
UIColor *strokeColor = [UIColor orangeColor];
[strokeColor set];
//描边
[path stroke];

Ps:使用+ bezierPathWithOvalInRect创建UIBezierPath对象，当rect参数传入正方形的时候，画出来的是圆形，若rect参数不是正方，画出来是椭圆。
效果图：

屏幕快照 2016-10-25 下午4.54.33.png

画椭圆

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20,  20,  40,  60)];
path.lineWidth = 2;
//设置填充颜色
UIColor *fillColor = [UIColor magentaColor];
[fillColor set];
//填充
[path fill];
//设置画笔颜色
UIColor *strokeColor = [UIColor orangeColor];
[strokeColor set];
//描边
[path stroke];

使用bezierPathWithOvalInRect画椭圆，rect参数不传正方形，画出来的就是椭圆。

效果图如下:

屏幕快照 2016-10-25 下午4.58.16.png

画带圆角的矩形

+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
                        cornerRadius:(CGFloat)cornerRadius;
+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
                    byRoundingCorners:(UIRectCorner)corners 
                          cornerRadii:(CGSize)cornerRadii;

第一个方法可以画带圆角的矩形，rect参数是矩形，cornerRadius参数是圆角的大小；第二个方法可以制定某一个角画成圆角。

首先来画四个角都是圆角的

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 40, 40) cornerRadius:20];
//设置填充颜色
UIColor *fillColor = [UIColor orangeColor];
[fillColor set];
//填充
[path fill];
//设置画笔颜色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
//描边
[path stroke];

效果图如下：

屏幕快照 2016-10-25 下午5.06.23.png

接下来画右上角是圆角的

//制定右上角为圆角
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.height - 40) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];
//设置填充颜色
UIColor *fillColor = [UIColor orangeColor];
[fillColor set];
//填充
[path fill];
//设置画笔颜色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
//描边
[path stroke];

代码解释：第一个参数传矩形，第二个参数制定哪个角为圆角，第三个参数指定水平和垂直方向半径的大小。
效果图如下:

屏幕快照 2016-10-25 下午5.13.55.png

画弧
下图为弧线的参考系

20130904200813921.jpg

#define kDegreesToRadians(degrees)  ((M_PI * degrees)/ 180)

CGPoint centerPoint = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:centerPoint radius:100 startAngle:0 endAngle:kDegreesToRadians(135) clockwise:YES];
path.lineCapStyle = kCGLineCapRound;  //线条拐角
path.lineJoinStyle = kCGLineJoinRound;//终点处理
path.lineWidth = 5.0;
UIColor *strokeColor = [UIColor redColor];
[strokeColor set];
[path stroke];

代码解释：startAngle、endAngle代表开始和结束的弧度，不是我们日常的角度，使用时候需要转换成弧度。

效果图如下：

屏幕快照 2016-10-25 下午5.40.00.png

画二次贝塞尔曲线

20130904201943296.jpg

controlPoint为控制点

UIBezierPath *path = [UIBezierPath bezierPath];
//设置一个起始点
[path moveToPoint:CGPointMake(20, self.frame.size.height - 100)];
//添加二次曲线 controlPoint控制点
[path addQuadCurveToPoint:CGPointMake(self.frame.size.width - 20, self.frame.size.height - 100) controlPoint:CGPointMake(self.frame.size.width / 2, 0)];
path.lineCapStyle = kCGLineCapRound;   //线条拐角
path.lineJoinStyle = kCGLineJoinRound; //终点处理
path.lineWidth = 5.0;
UIColor *strokeColor = [UIColor purpleColor];
[strokeColor set];
[path stroke];

效果图如下：

屏幕快照 2016-10-25 下午5.50.07.png

画三次贝塞曲线

20130904201939421.jpg

三次贝塞尔曲线有两个控制点

UIBezierPath *path = [UIBezierPath bezierPath];
//设置起始点
[path moveToPoint:CGPointMake(20, 150)];
//添加三次曲线 controlPoint1控制点1 controlPoint2控制点2
[path addCurveToPoint:CGPointMake(300, 150) controlPoint1:CGPointMake(160, 0) controlPoint2:CGPointMake(160, 250)];
path.lineCapStyle = kCGLineCapRound;   //线条拐角
path.lineJoinStyle = kCGLineJoinRound; //终点处理
path.lineWidth = 5.0;
UIColor *strokeColor = [UIColor redColor];
[strokeColor set];
[path stroke];

效果图如下：

屏幕快照 2016-10-25 下午6.03.06.png

CAShapeLayer结合UIBezierPath画图

CAShapeLayer *circleShapeLayer = [CAShapeLayer layer];
//设置frame
circleShapeLayer.frame = CGRectMake(0, 0, 200, 200);
circleShapeLayer.position = self.view.center;
//设置填充颜色
circleShapeLayer.fillColor = [UIColor clearColor].CGColor;
//设置线宽
circleShapeLayer.lineWidth = 2.0;
//设置线的颜色
circleShapeLayer.strokeColor = [UIColor redColor].CGColor;
CGRect frame = CGRectMake(0, 0, 200, 200);
//使用UIBezierPath创建路径
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:frame];
//关联CAShapeLayer与UIBezierPath
circleShapeLayer.path = circlePath.CGPath;
//将CAShaperLayer添加到某个层上显示
[self.view.layer addSublayer:circleShapeLayer];

效果图如下：

屏幕快照 2016-10-25 下午6.11.08.png

UIBezierPath动画

-(void)startAnimation
{
AppDelegate *appDelegate = APP_DELEGATE;
if (!windowLayer) {
    windowLayer = [CALayer layer];
    windowLayer.bounds = [UIScreen mainScreen].bounds;
    [appDelegate.window.layer addSublayer:windowLayer];
}
if (!layer)
{
    layer = [CALayer layer];
    layer.contents = (__bridge id)[UIImage imageNamed:@"icon_redDot.png"].CGImage;
    layer.contentsGravity = kCAGravityResizeAspectFill;
    layer.bounds = CGRectMake(100, 100, 20, 20);
    [layer setCornerRadius:CGRectGetHeight([layer bounds]) / 2];
    layer.masksToBounds = YES;
    layer.position =CGPointMake(50, 150);
    [appDelegate.window.layer addSublayer:layer];
}
layer.hidden = NO;
[self groupAnimation];
}

-(void)groupAnimation
{
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.path = _path.CGPath;
animation.rotationMode = kCAAnimationRotateAuto;

//缩小
CABasicAnimation *narrowAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
narrowAnimation.beginTime = 0.5;
narrowAnimation.duration = 0.25f;
narrowAnimation.fromValue = [NSNumber numberWithFloat:2.0f];
narrowAnimation.toValue = [NSNumber numberWithFloat:0.5f];
narrowAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

CAAnimationGroup *groups = [CAAnimationGroup animation];
groups.animations = @[animation,narrowAnimation];
groups.duration = 0.5f;
groups.removedOnCompletion=NO;
groups.fillMode=kCAFillModeForwards;
groups.delegate = self;
[layer addAnimation:groups forKey:@"group"];
}

效果图如下：

BDA9B7C7F7EF2A142239ACBE13EC1E33.png

本文demo
https://github.com/maying1992/UIBezierPathCAShapeLayerDemo.git
仅供交流学习，喜欢的随手给个星星。
Have fun！

参考文献
http://blog.csdn.net/crayondeng/article/details/11093689
http://blog.csdn.net/yongyinmg/article/details/38844879