探究CAShapeLayer & UIBezierPath画线、
2020-09-12 本文已影响0人
牧羊的诗人
一、CAShapeLayer
- CAShapeLayer 继承与CALayer( 主要用于设置图层的形状)
| 属性名 | 描述 |
|---|---|
| path | CGPathRef 对象，图形边线路径 |
| lineWidth | 边线的宽度 |
| strokeColor | 边线的颜色 |
| lineDashPattern | 设置边线的样式，默认为实线，该数组为一个NSNumber数组，数组中的数值依次表示虚线中，单个线的长度，和空白的长度，如:数组@[2,2,3,4] 表示 有长度为2的线，长度为2的空白，长度为3的线，长度为4的空白 不断循环后组成的虚线。 |
| lineCap | 线终点的样式：
默认 kCALineCapButt
kCALineCapRound
kCALineCapSquare
|
| lineJoin | 线拐点处的样式：
默认 kCALineJoinMiter
kCALineJoinRound
kCALineJoinBeve
|
| strokeStart strokeEnd | CGFloat类型，[0,1] 表示画边线的起点和终点（即在路径上的百分比） |
| fillColor | CGColorRef对象，图形填充色，默认为黑色 |
二、UIBezierPath 和 贝塞尔曲线
2.1什么是贝塞尔曲线？
法国数学家 Paul de Casteljau 在1959年提供的一种 算法。根据这个算法，就可以只通过很少的控制点，去生成复杂的平滑曲线，也就是贝塞尔曲线。
2.2贝塞尔曲线是怎么画出来的？
首先，我们在平面内选3个不同线的点并且依次用线段连接。如下所示..
接着，我们在AB和BC线段上找出点D和点E，使得AD/AB = BE/BC。
再接着，连接DE，并在DE上找出一点F，使得DF/DE = AD/AB = BE/BC。
然后，根据我们高中所学的极限的知识，让选取的点D在第一条线段上从起点A，移动到终点B，找出所有点F，并将它们连起来。最后你会发现，你得到了一条非常光滑的曲线，这条就是传说中的，贝塞尔曲线。
二阶贝塞尔曲线
下面是三阶四阶和五阶。
三阶贝塞尔曲线
四阶贝塞尔曲线
五阶贝塞尔曲线
最后提下一，这个是一阶
一阶贝塞尔曲线
2.3怎么使用贝塞尔曲线？
首先，要明确的一点是，对于贝塞尔曲线来说，最重要的点是，数据点和控制点。
- 数据点： 指一条路径的起始点和终止点。
- 控制点：控制点决定了一条路径的弯曲轨迹，根据控制点的个数，贝塞尔曲线被分为一阶贝塞尔曲线（0个控制点）、二阶贝塞尔曲线（1个控制点）、三阶贝塞尔曲线（2个控制点）等等。
系统给我们提供了一个叫做UIBezierPath类，用它可以画简单的圆形，椭圆，矩形，圆角矩形，也可以通过添加点去生成任意的图形，还可以简单的创建一条二阶贝塞尔曲线和三阶贝塞尔曲线。
用法一：UIBezierPath+CAShapeLayer画线，画图
CAShapeLayer的path属性可以由UIBezierPath来提供，从而可以画线画图。
CAShapeLayer *animLayer = [CAShapeLayer layer];
//UIBezierPath提供路径!!!!!!
animLayer.path = _path.CGPath;
//路径宽度
animLayer.lineWidth = 5.f;
//路径颜色
animLayer.strokeColor = [UIColor redColor].CGColor;
//图形填充颜色
animLayer.fillColor = [UIColor orangeColor].CGColor;
//起点
animLayer.strokeStart = 0;
//终点
animLayer.strokeEnd = 1.;
//设置虚线
animLayer.lineDashPattern = @[@20,@20];
//线拐点处的样式：
animLayer.lineJoin = kCALineJoinRound;
//线终点的样式
animLayer.lineCap = kCALineCapRound;
[self.view.layer addSublayer:animLayer];
//添加路径动画
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = @(0);
animation.toValue = @(1.f);
animation.duration = 2.0f;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[animLayer addAnimation:animation forKey:@"strokeEnd"];
折线
// 线的路径
_path = [UIBezierPath bezierPath];
// 起点
[_path moveToPoint:CGPointMake(20, 20)];
// 其他点
[_path addLineToPoint:CGPointMake(160, 160)];
[_path addLineToPoint:CGPointMake(180, 50)];
多边形
_path = [UIBezierPath bezierPath];
//这是起点
[_path moveToPoint:CGPointMake(100.0, 200.0)];
//添加点
[_path addLineToPoint:CGPointMake(200.0, 240.0)];
[_path addLineToPoint:CGPointMake(160, 340)];
[_path addLineToPoint:CGPointMake(40.0, 340)];
[_path addLineToPoint:CGPointMake(10.0, 240.0)];
[_path closePath]; //第五条线通过调用closePath方法得到的
矩形
_path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 100, 100)];
圆角矩形
_path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 100) cornerRadius:25];
自定义圆角矩形
_path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 100) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(25, 25)];
圆或椭圆
_path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 100)];
圆弧
// center 圆心
// radius 半径
// startAngle 开始角度
// endAngle 结束角度
// clockwise 顺时针or逆时针
_path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200) radius:100 startAngle:0 endAngle:M_PI clockwise:YES];
折线和弧线构成的曲线
// 画弧的中心点
CGPoint viewCenter = CGPointMake(self.view.frame.size.width / 2.0, self.view.frame.size.height / 2.0);
_path = [UIBezierPath bezierPath];
[_path moveToPoint:viewCenter];
[_path addArcWithCenter:viewCenter radius:50 startAngle:0 endAngle:M_PI/4*3 clockwise:YES]; // 添加一条弧线
[_path closePath];
//一阶曲线
_path = [UIBezierPath bezierPath];
_path.lineWidth = 5.0;//宽度
//起始点
[_path moveToPoint:CGPointMake(20, 200)];
//添加终点和控制点
[twoPath addQuadCurveToPoint:CGPointMake(220, 200) controlPoint:CGPointMake(120, 0)];
//二阶曲线
_path = [UIBezierPath bezierPath];
_path.lineWidth = 5.0;
//起始点
[ _path moveToPoint:CGPointMake(0, 200)];
//添加两个控制点
[ _path addCurveToPoint:CGPointMake(360, 200) controlPoint1:CGPointMake(135, 0) controlPoint2:CGPointMake(225, 400)];
用法二：UIBezierPath+CAKeyframeAnimation 为关键帧动画提供动画路径
可以参考iOS动画梳理与总结 (一) 核心动画。
用法三：用贝塞尔曲线做变形
可参考本节提供的demo。
用法四：用贝塞尔曲线做缓冲动画
做动画最主要的一点，就是要让动画达到很自然的效果。所以就需要我们给动画设置一条顺滑的速率曲线。
这个时候就不得不提到 CAMediaTimingFunction。
CAMediaTimingFunction 的主要用法可以理解为我们在一个二维坐标系上建议一条或曲线或直线的函数，这个函数的斜率就是动画的速度，斜率的改变量也就是导数则为加速度。理论上来说，这个坐标系上的任何曲线都可以用来当做加速动画。然而CAMediaTimingFunction 只给我们提供了一个三次贝塞尔曲线的函数，它可以生成三次贝塞尔曲线所能生成的所有缓冲函数。
这里刚好可以介绍 一个 两个好用的网站： http://www.roblaplaca.com/examples/bezierBuilder
这个网站可以做到可视化的修改两个控制点，来达到生成一条三阶贝塞尔曲线，并且还会给出两个控制点的具体坐标，以及右边还可以看到这条曲线产生的动画会做怎样的速度改变。也就是说，只要我们能拿到两个控制点的坐标，就可以用来控制动画了。
这个网站提供了丰富的曲线类型可供选择，图表旁还有一个小动画预览，非常直观。
UIView *demoView = [[UIView alloc] initWithFrame:CGRectMake(0, 300,100 ,100 )];
demoView.backgroundColor = [UIColor redColor];
[self.view addSubview:demoView];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.fromValue = @(CGPointMake(50, 300));
animation.toValue = @(CGPointMake(WIDTH-50, 300));
animation.duration = 5.0f;
animation.autoreverses = YES;
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
//设置速率曲线
animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.48 :0.01 :0.48 :1.01];
[demoView.layer addAnimation:animation forKey:@"position"];
