CAShapeLayer、UIBezierPath动画

1、画三角形

- (void)drawTriangle {
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPath];
    //绘制三角形的三个顶点，自己算，能连成三角形就行啦！
    [path moveToPoint:CGPointMake(50, 30)];
    [path addLineToPoint:CGPointMake(110, 30)];
    [path addLineToPoint:CGPointMake(80, 60)];
    //连接三个点
    [path closePath];
    layer.path = path.CGPath;
    //填充图形颜色
    layer.fillColor = [UIColor clearColor].CGColor;
    //图形变现颜色
    layer.strokeColor = [UIColor blackColor].CGColor;
    //self.drawView,自己定义一个View，继承UIView
    [self.drawView.layer addSublayer:layer];
    //不加动画就会直接出现三角形，这里我们加了动画，请看下面的动画方法！！！
    [self drawAnimationType:self.animationType layer:layer];
}```
在viewdidload里调用这个方法就可以啦！！！

2、画圆，画圆有好几种方法，下面来一一介绍一下

• (void)drawCircular {

  //第一种
  CAShapeLayer *layer = [CAShapeLayer layer];
  UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 100, 100) cornerRadius:50];
  layer.path = path.CGPath;
  layer.fillColor = [UIColor clearColor].CGColor;
  layer.strokeColor = [UIColor blackColor].CGColor;
  [self.drawView.layer addSublayer:layer];

  //第二种
  CAShapeLayer layer = [CAShapeLayer layer];
  /
  *param1:图形大小
  *param2:圆角的位置
  *param3:圆角的大小
  */
  UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake((kScreenWidth-40)/2-50, 30, 100, 100) byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(30, 30)];
  layer.path = path.CGPath;
  layer.fillColor = [UIColor clearColor].CGColor;
  layer.strokeColor = [UIColor blackColor].CGColor;
  [self.drawView.layer addSublayer:layer];

  //第三种
  CAShapeLayer layer2 = [CAShapeLayer layer];
  /
  *param1:圆的中心点
  *param2:圆的半径
  *param3:开始画圆的角度
  *param4:结束画圆的角度
  *param5:YES为顺时针画圆，NO为逆时针画圆
  */
  UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:30 startAngle:0.0 endAngle:M_PI * 2 clockwise:NO];
  layer2.path = path2.CGPath;
  layer2.fillColor = [UIColor clearColor].CGColor;
  layer2.strokeColor = [UIColor blackColor].CGColor;
  [self.drawView.layer addSublayer:layer2];

  //椭圆
  CAShapeLayer *layer3 = [CAShapeLayer layer];
  UIBezierPath *path3 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(250, 30, 80, 50)];
  layer3.path = path3.CGPath;
  layer3.fillColor = [UIColor clearColor].CGColor;
  layer3.strokeColor = [UIColor blackColor].CGColor;
  [self.drawView.layer addSublayer:layer3];
  }```
  上面介绍的四种方法都可以画圆！！！

3、单点曲面

- (void)drawCurve {
    
    //贝塞尔曲线由起点，终点，控制点三个参数控制绘制，这里把三个参数的坐标提出来写，更加直观
    CGPoint startPoint = CGPointMake(20, 100);
    CGPoint endPoint = CGPointMake(300, 100);
    CGPoint controlPoint = CGPointMake(160, 10);
    
    //这里把三个点都绘制出来了，以便观察
    CALayer *layer1 = [CALayer layer];
    layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
    layer1.backgroundColor = [UIColor blackColor].CGColor;
    
    CALayer *layer2 = [CALayer layer];
    layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5);
    layer2.backgroundColor = [UIColor blackColor].CGColor;
    
    CALayer *layer3 = [CALayer layer];
    layer3.frame = CGRectMake(controlPoint.x, controlPoint.y, 5, 5);
    layer3.backgroundColor = [UIColor blackColor].CGColor;
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:startPoint];
    [path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor blackColor].CGColor;
    [self.drawView.layer addSublayer:layer];
    [self.drawView.layer addSublayer:layer1];
    [self.drawView.layer addSublayer:layer2];
    [self.drawView.layer addSublayer:layer3];

    [self drawAnimationType:self.animationType layer:layer];
}```
这个方法画的是单点曲线

4、双点曲线

• (void)drawCurveWithTwoDot {

  //贝塞尔曲线由起点，终点，控制点三个参数控制绘制，这里把三个参数的坐标提出来写，更加直观
  CGPoint startPoint = CGPointMake(20, 100);
  CGPoint endPoint = CGPointMake(300, 100);
  CGPoint controlPoint1 = CGPointMake(90, 10);
  CGPoint controlPoint2 = CGPointMake(230, 190);

  CALayer *layer1 = [CALayer layer];
  layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
  layer1.backgroundColor = [UIColor clearColor].CGColor;//给layer1赋值颜色，以便观察，项目中一般用透明色即可！
  CALayer *layer2 = [CALayer layer];
  layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5);
  layer2.backgroundColor = [UIColor clearColor].CGColor;

  CALayer *layer3 = [CALayer layer];
  layer3.frame = CGRectMake(controlPoint1.x, controlPoint1.y, 5, 5);
  layer3.backgroundColor = [UIColor clearColor].CGColor;

  CALayer *layer4 = [CALayer layer];
  layer4.frame = CGRectMake(controlPoint2.x, controlPoint2.y, 5, 5);
  layer4.backgroundColor = [UIColor clearColor].CGColor;

  CAShapeLayer *layer = [CAShapeLayer layer];
  UIBezierPath *path = [UIBezierPath bezierPath];
  [path moveToPoint:startPoint];
  [path addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
  layer.path = path.CGPath;
  layer.fillColor = [UIColor clearColor].CGColor;
  layer.strokeColor = [UIColor blackColor].CGColor;
  [self.drawView.layer addSublayer:layer];
  [self.drawView.layer addSublayer:layer1];
  [self.drawView.layer addSublayer:layer2];
  [self.drawView.layer addSublayer:layer3];
  [self.drawView.layer addSublayer:layer4];

  [self drawAnimationType:self.animationType layer:layer];
  }```

5、绘制多边形

- (void)drawPolygonWithNum:(CGFloat)num {
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPath];
    CGFloat radius = 50;//设置一个半径
    CGFloat centerX = (kScreenWidth-20)/2;
    CGFloat centerY = 100;
    
    if (num < 3) {
        
        num = 3;
    }
    [path moveToPoint:CGPointMake(centerX+radius, centerY)];
    NSLog(@"%f",sin(2*M_PI*1/num));
    //这里涉及到一个算法，大家看看！！！
    for (int i = 1; i <= num; i ++) {
        
        [path addLineToPoint:CGPointMake(centerX+radius*cos(2*M_PI*i/num), centerY+radius*sin(2*M_PI*i/num))];
        layer.path = path.CGPath;
    }
    [path closePath];
    layer.strokeColor = [UIColor blackColor].CGColor;
    layer.fillColor = [UIColor clearColor].CGColor;
    [self.drawView.layer addSublayer:layer];
    
    [self drawAnimationType:self.animationType layer:layer];
}```


二、下面来讲讲动画
动画用到的主要是CABasicAnimation和CAAnimationGroup
顾名思义，一个是单独的动画，一个是多个动画形成的动画组。
下面来看一个动画效果：

• (void)animationWithDraw2:(CAShapeLayer *)layer duration:(CFTimeInterval)duration {
  //这里的keyPath有很多值，除了自带的一些值之外，还有一些其他的值可以用，像strokeEnd、strokeStart、path等！
  CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
  //fromValue：开始值，toValue：结束值，这两个值的取值范围为（0，1），不可超出
  animation.fromValue = @(0);
  animation.toValue = @(1);
  animation.duration = duration;//动画持续时间
  //animation.beginTime = 0;//动画开始时间
  [layer addAnimation:animation forKey:nil];

  //这个值是自带的属性
  CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"opacity"];
  animation2.fromValue = @(1);
  animation2.toValue = @(0);
  // animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
  animation2.duration = duration;
  animation2.beginTime = 2;
  animation2.repeatCount = FLT_MAX;
  animation2.removedOnCompletion = NO;
  animation2.autoreverses = YES;
  [layer addAnimation:animation2 forKey:nil];

  CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
  animation.fromValue = (__bridge id _Nullable)fromValue.CGPath;
  animation.toValue = (__bridge id _Nullable)toValue.CGPath;
  animation.duration = drawDuration;
  }```
  //以上key path的键值大家可以参考该网页http://blog.csdn.net/majiakun1/article/details/46426727