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
网友评论