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)];
- 通过该类方法创建了一条空白的贝塞尔曲线。
- path移至起始点
- 绘制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];
- 创建一个CAShapeLayer实例；
（CALayer负责这些view的显示，例如view的大小、形状、弧度等，在iOS里，UIView必须支持CALayer（而 Mac OS里不是必须））
制定贝塞尔曲线为layer的shap路径
添加layer到当前视图的layer之上
动态绘制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"];
}
运行效果：
改造
- 生成贝塞尔曲线亦可使用如下方式：
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绘制圆形。
关于角度，找到一个图解（链接）
-
绘制一个圆角矩形：
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 200) cornerRadius:8.0];
* 绘制一个矩形，并且只在右上、右下角加圆角效果。（其中cornerRadii在x、y上分别作用）
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 200) byRoundingCorners:UIRectCornerTopRight|UIRectCornerBottomRight cornerRadii:CGSizeMake(20, 20)];
---
# 二阶贝塞尔曲线等
* 二阶贝塞尔曲线
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100, 100)];
[path addQuadCurveToPoint:CGPointMake(200, 100) controlPoint:CGPointMake(160, 0)];
初始点、终点和控制点构成一个弧形。效果如下：
* 三阶贝塞尔曲线
//贝塞尔控制点生成 http://www.j--d.com/bezier
[path moveToPoint:CGPointMake(9, 198)];
[path addCurveToPoint:CGPointMake(199,104) controlPoint1:CGPointMake(71, 91) controlPoint2:CGPointMake(109,197)];
两个控制点，效果如下：
---
# 动画控制
贝塞尔曲线绘制时可以通过`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;
}
}
运行结果如下：
---
在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渲染图形，不消耗内存，性能好。
*
