UIBezierPath+CAShapeLayer实现简单的动画

---

• 首先绘制一个简单的方形线框：

    UIBezierPath *path = [UIBezierPath bezierPath];//1
    
    [path moveToPoint:CGPointMake(100, 100)];//2
    //3
    [path addLineToPoint:CGPointMake(200, 100)];
    [path addLineToPoint:CGPointMake(200, 200)];
    [path addLineToPoint:CGPointMake(100.0, 200.0)];
    [path addLineToPoint:CGPointMake(100.0, 100.0)];

1. 通过该类方法创建了一条空白的贝塞尔曲线。
2. path移至起始点
3. 绘制4条直线，逆向闭合。

CAShapeLayer

在上述代码的基础上，追加以下：

    shapeLayer = [CAShapeLayer layer];//1
    shapeLayer.path = path.CGPath;//2

    //3、 填充颜色
    UIColor *fillColor = [UIColor clearColor];
    shapeLayer.fillColor = fillColor.CGColor;
    // 画笔颜色
    UIColor *strokeColor = [UIColor greenColor];
    shapeLayer.strokeColor = strokeColor.CGColor;
    //4
    shapeLayer.lineWidth = 3.0f;
    [self.view.layer addSublayer:shapeLayer];
    //5
    [self startAnimation];

1. 创建一个CAShapeLayer实例；

（CALayer负责这些view的显示，例如view的大小、形状、弧度等，在iOS里，UIView必须支持CALayer（而 Mac OS里不是必须））

2. 制定贝塞尔曲线为layer的shap路径

4. 添加layer到当前视图的layer之上

5. 动态绘制layer

- (void)startAnimation {
  CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
  animation.duration = 2.0;
  animation.repeatCount = 100.0f;
  animation.fromValue = @0.0f;//动画从0开始
  animation.toValue = @1.0f;//到1结束
  [shapeLayer addAnimation:animation forKey:@"animatePath"];
}

运行效果：

a.gif

改造

• 生成贝塞尔曲线亦可使用如下方式：

UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 200, 200)];

运行效果同上，只是此时以rect生成path，是以像素点为主，而非上面的像素，故方形大小是上面的2倍。

• 绘制一个内切与rect的圆

  UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 200)];
  

  a.gif

• 2中的动画的初始点并不是我们所控制的，故修正版如下：

  UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(160, 200) radius:50 startAngle:-M_PI / 2.0 endAngle:3 * M_PI/2.0 clockwise:isClockWise];
  

  path以中心点，radius半径，并且start到end绘制圆形。

a.gif

关于角度，找到一个图解（链接）

arc.png

• 绘制一个圆角矩形：

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 200) cornerRadius:8.0];

![a.gif](https://img.haomeiwen.com/i188623/d8797af7f3e2fbd9.gif?imageMogr2/auto-orient/strip)

* 绘制一个矩形，并且只在右上、右下角加圆角效果。（其中cornerRadii在x、y上分别作用）

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 200) byRoundingCorners:UIRectCornerTopRight|UIRectCornerBottomRight cornerRadii:CGSizeMake(20, 20)];

![a.gif](https://img.haomeiwen.com/i188623/a9f79bdef01eff0f.gif?imageMogr2/auto-orient/strip)


---

# 二阶贝塞尔曲线等

* 二阶贝塞尔曲线

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100, 100)];
[path addQuadCurveToPoint:CGPointMake(200, 100) controlPoint:CGPointMake(160, 0)];

初始点、终点和控制点构成一个弧形。效果如下：


![a.gif](https://img.haomeiwen.com/i188623/ad585807b07bcf27.gif?imageMogr2/auto-orient/strip)

* 三阶贝塞尔曲线

//贝塞尔控制点生成 http://www.j--d.com/bezier
[path moveToPoint:CGPointMake(9, 198)];
[path addCurveToPoint:CGPointMake(199,104) controlPoint1:CGPointMake(71, 91) controlPoint2:CGPointMake(109,197)];

  两个控制点，效果如下：


  ![a.gif](https://img.haomeiwen.com/i188623/e0ae3ad154d3bc6c.gif?imageMogr2/auto-orient/strip)

---

# 动画控制

  贝塞尔曲线绘制时可以通过`strokeStart`和`strokeEnd`来确定曲线的长短。

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(160, 200) radius:50 startAngle:-M_PI / 2.0 endAngle:3 * M_PI/2.0 clockwise:YES];

shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
// 填充颜色
UIColor *fillColor = [UIColor clearColor];
shapeLayer.fillColor = fillColor.CGColor;
// 画笔颜色
UIColor *strokeColor = [UIColor greenColor];
shapeLayer.strokeColor = strokeColor.CGColor;
shapeLayer.lineWidth = 3.0f;
[self.view.layer addSublayer:shapeLayer];


shapeLayer.strokeStart = .0f;
shapeLayer.strokeEnd = .0f;

刷新timer

self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateStroke) userInfo:nil repeats:YES];

• (void)updateStroke
  {
  NSNumber *startNumber=[NSNumber numberWithFloat:shapeLayer.strokeStart];
  CGFloat startValue=[startNumber floatValue];
  NSNumber *endNumber=[NSNumber numberWithFloat:shapeLayer.strokeEnd];
  CGFloat endValue=[endNumber floatValue];

  if (startValue==0&&endValue<1) {
  shapeLayer.strokeEnd+=0.1;
  }
  if (endValue==1&&startValue<1) {
  shapeLayer.strokeStart+=0.1;
  }

  if (startValue>0&&startValue==endValue) {
  shapeLayer.strokeStart=0;
  shapeLayer.strokeEnd=0;
  }
  }

运行结果如下：


  ![a.gif](https://img.haomeiwen.com/i188623/f7b19806b759c73e.gif?imageMogr2/auto-orient/strip)


---

在drawRect：中绘制实例：

-(void)drawRect:(CGRect)rect{
path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0,self.frame.size.height)];
[path addCurveToPoint:CGPointMake(self.frame.size.width, 0) controlPoint1:CGPointMake(39, 25) controlPoint2:CGPointMake(174, 199)];

path.lineWidth = 1;
UIColor *fillColor = [UIColor clearColor];
[fillColor set]; [path fill];
UIColor *strokeColor = [UIColor redColor];
[strokeColor set];
[path stroke];
}

---

总结：
* drawRect属于CoreGraphics框架，占用CPU，故性能消耗大
* CAShapLayer属于CoreAnimation框架，通过GPU渲染图形，不消耗内存，性能好。

*