使用shapelayer 畫圖步驟
1、新建UIBezierPath對象bezierPath
2、新建CAShapeLayer對象caShapeLayer
3、將bezierPath的CGPath賦值給caShapeLayer的path，即caShapeLayer.path = bezierPath.CGPath
4、把CAShapeLayer添加到某個顯示該圖形的layer中
shapelayer 動畫效果的幾種實現方式
看果凍效果來更好的理解
1、使用coreanimation動畫
- CAKeyframeAnimation。
- CABasicAnimation
2、修改bezierPath路徑：
- 使用CADisplayLink
- 使用pan手勢
3、pan
創建bezierPath 曲線
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(0, self.bounds.size.height * 0.5)];
[path addLineToPoint:CGPointMake(15, 0)];
[path addLineToPoint:CGPointMake(self.bounds.size.width, 0)];
[path addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height)];
[path addLineToPoint:CGPointMake(15, self.bounds.size.height)];
[path closePath];
創建shapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.fillColor = [[UIColor brownColor] colorWithAlphaComponent:0.3].CGColor;
shapeLayer.path = path.CGPath;
[self.layer addSublayer:shapeLayer];
加動畫
CABasicAnimation *animation = [[CABasicAnimation alloc] init];
animation.keyPath = @"strokeStart";
animation.fromValue = @0;
animation.toValue = @1;
animation.repeatCount = MAXFLOAT;
animation.duration = 1;
animation.timingFunction= [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];;
[shapeLayer addAnimation:animation forKey:nil];
也可以使用加動畫組
shaplayer 的屬性 ：strokeStart strokeEnd
CABasicAnimation 動態改變 這兩個屬性值，可以實現劃線的過程動畫
mask遮罩
使用shaplayer隨意修改view的圓角
UIView *redView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
redView.center = self.view.center;
redView.backgroundColor = [UIColor redColor];
UIRectCorner rectCorner = UIRectCornerTopLeft|UIRectCornerTopRight;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:redView.bounds byRoundingCorners:rectCorner cornerRadii:CGSizeMake(40, 40)];
CAShapeLayer *shaperLayer = [CAShapeLayer layer];
shaperLayer.path = path.CGPath;
redView.layer.mask = shaperLayer;
[self.view addSubview:redView];
使用shaplayer修改view遮罩
CAShapeLayer *shapeLayer = [[CAShaperLayer alloc] init];
UIBezierPath *path = [UIBezierPath alloc] init];
......
shapeLayer.path = path.CGPath;
view.layer.mask = shapeLayer;
//設置shapeLayer動畫，可以實現view逐漸顯示的效果
使用shapelier 畫各種線
畫三角形
- (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];
}
畫圓
- (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];
}
畫單點曲線
- (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];
}
畫雙點曲線
- (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];
}
畫多邊形
- (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];
}
