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. 通過該類方法創(chuàng)建了一條空白的貝塞爾曲線。
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. 創(chuàng)建一個CAShapeLayer實例；

（CALayer負責這些view的顯示，例如view的大小、形狀、弧度等，在iOS里，UIView必須支持CALayer（而 Mac OS里不是必須））

2. 制定貝塞爾曲線為layer的shap路徑

4. 添加layer到當前視圖的layer之上

5. 動態(tài)繪制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](http://upload-images.jianshu.io/upload_images/188623-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](http://upload-images.jianshu.io/upload_images/188623-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](http://upload-images.jianshu.io/upload_images/188623-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](http://upload-images.jianshu.io/upload_images/188623-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](http://upload-images.jianshu.io/upload_images/188623-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渲染圖形，不消耗內存，性能好。

*