一.iOS贝塞尔曲线与CAShapeLayer详解
实现效果图如下:
实现彩虹条动画显示效果
一.创建一个贝塞尔曲线
1.基础方法,先创建UIBezierPath对象,在添加路径
+ (instancetype)bezierPath;
- (instancetype)init NS_DESIGNATED_INITIALIZER;
+(instancetype)new;
这三个方法都可以得到一个UIBezierPath对象
然后通过一下方法添加路径
- (void)moveToPoint:(CGPoint)point;//移动到某一起点,这比第一步必须要有
- (void)addLineToPoint:(CGPoint)point;//添加一条直线从起点到设定的某点
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;//添加一条曲线在起点和设置的重点之前,通过两个控制点控制曲线形状
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;//添加一条曲线在起点和设置的重点之前,通过一个控制点控制曲线形状
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwiseNS_AVAILABLE_IOS(4_0);//添加弧线有某点为弧心,可设置半径以及起始和结束角度,顺逆时针方向
- (void)closePath;//使路径封闭
2.类方法直接创建指定路径
+ (instancetype)bezierPathWithRect:(CGRect)rect;//创建一个在一定范围内封闭边沿路径
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;//在一定范围内封闭的最大的圆形路径
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;// rounds all corners with the same horizontal and vertical radius;//在一定范围内以一个指定半径的封闭圆形路径
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;//在一定范围内指定一个或多个角切圆角并指定圆角半径的封闭路径
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;//以某点为中心一个半径为多少,起始角度与结束角度的弧形不封闭区域,可指定顺时针和逆时针YES表示顺,可通过- (void)closePath;方法封闭路径
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;//指定某个绘制路径为路径的路径
二.CAShapeLayer属性
@property(nullable) CGPathRef path;
定义要呈现的形状的路径。如果路径延伸在图层边界之外它不会自动被剪切，只有在谁知clibToBounds的时候才会裁剪。默认为空。可以做成动画。(注意，尽管路径属性是可动画的，但没有隐式动画)
@property(nullable) CGColorRef strokeColor;
填充路径的颜色，或无填充为nil。默认为不透明的黑色。可以做成动画
@property(copy) NSString *lineCap;
填充路径时使用的填充规则。
CA_EXTERN NSString *const kCALineCapButt(路径未封闭端为平的并与区域齐平)
CA_EXTERN NSString *const kCALineCapRound(路径未封闭端为圆角的并超出区域一部分)
CA_EXTERN NSString *const kCALineCapSquare(路径未封闭端为平的并超出区域一部分)
以上超出部分为lineWidth属性的一半
@property CGFloat lineWidth;
路径宽度
@property CGFloat strokeStart;
@property CGFloat strokeEnd;
路径后开始和结束,值都在0~1之间,可以做动画
@property(nullable) CGColorRef fillColor;
@property(copy) NSString *fillRule;
区域颜色,样式
三.附上自己写的一个效果测试两者结合做的简单动画
简单动画效果
测试代码如下:(直接创建一个工程在mainstoryboard创建一个按钮,替换掉.m,加上点击事件可看效果)
//// ViewController.m// HudTest//// Created by iOS on 17/6/8.// Copyright © 2017年 iOS. All rights reserved.//
#import "ViewController.h"
@interface ViewController (){
CAShapeLayer *maskLayer;
CABasicAnimation *_animation;
}
@end
@implementation ViewController
- (IBAction)show:(id)sender {
//只点一次看看效果就好,想自己怎么做都好,我比较懒就不做清除判断了
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:80 startAngle:0 endAngle:M_PI clockwise:YES];
maskLayer = [CAShapeLayer layer];
maskLayer.backgroundColor = [UIColor clearColor].CGColor;
maskLayer.path = bezierPath.CGPath;
maskLayer.strokeColor = [UIColor greenColor].CGColor;
maskLayer.fillColor = [UIColor whiteColor].CGColor;
maskLayer.lineWidth = 20;
maskLayer.fillRule = kCAFillRuleEvenOdd;
maskLayer.lineCap = kCALineCapRound;
[self.view.layer addSublayer:maskLayer];
maskLayer.strokeStart = 0;
maskLayer.strokeEnd = 1;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = @0;
animation.duration = 3.0f;
animation.delegate = self;
animation.repeatCount = 0;
[animation setValue:@"BasicAnimationEnd" forKey:@"animationName"];
[maskLayer addAnimation:animation forKey:@"BasicAnimationEnd"];
}
- (void)animationDidStart:(CAAnimation *)anim{
if (_animation) {
UIBezierPath *bezierPath1 = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:30 startAngle:M_PI endAngle:0 clockwise:NO];
maskLayer = [CAShapeLayer layer];
maskLayer.backgroundColor = [UIColor clearColor].CGColor;
maskLayer.path = bezierPath1.CGPath;
maskLayer.strokeColor = [UIColor redColor].CGColor;
maskLayer.fillColor = [UIColor whiteColor].CGColor;
maskLayer.lineWidth = 15;
maskLayer.fillRule = kCAFillRuleEvenOdd;
maskLayer.lineCap = kCALineCapRound;
[self.view.layer addSublayer:maskLayer];
maskLayer.strokeStart = 0;
maskLayer.strokeEnd = 1;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = @0;
animation.duration = 0.8f;
animation.repeatCount = 0;
[animation setValue:@"BasicAnimationEnd" forKey:@"animationName"];
[maskLayer addAnimation:animation forKey:@"BasicAnimationEnd"];
}else{
UIBezierPath *bezierPath1 = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:60 startAngle:M_PI endAngle:0 clockwise:NO];
maskLayer = [CAShapeLayer layer];
maskLayer.backgroundColor = [UIColor clearColor].CGColor;
maskLayer.path = bezierPath1.CGPath;
maskLayer.strokeColor = [UIColor yellowColor].CGColor;
maskLayer.fillColor = [UIColor whiteColor].CGColor;
maskLayer.lineWidth = 20;
maskLayer.fillRule = kCAFillRuleEvenOdd;
maskLayer.lineCap = kCALineCapRound;
[self.view.layer addSublayer:maskLayer];
maskLayer.strokeStart = 0;
maskLayer.strokeEnd = 1;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = @0;
animation.duration = 2.0f;
animation.repeatCount = 0;
[animation setValue:@"BasicAnimationEnd" forKey:@"animationName"];
[maskLayer addAnimation:animation forKey:@"BasicAnimationEnd"];
}}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
if (!_animation) {
UIBezierPath *bezierPath2 = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:45 startAngle:0 endAngle:M_PI clockwise:YES];
maskLayer = [CAShapeLayer layer];
maskLayer.backgroundColor = [UIColor clearColor].CGColor;
maskLayer.path = bezierPath2.CGPath;
maskLayer.strokeColor = [UIColor orangeColor].CGColor;
maskLayer.fillColor = [UIColor whiteColor].CGColor;
maskLayer.lineWidth = 15;
maskLayer.fillRule = kCAFillRuleEvenOdd;
maskLayer.lineCap = kCALineCapRound;
[self.view.layer addSublayer:maskLayer];
maskLayer.strokeStart = 0;
maskLayer.strokeEnd = 1;
_animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
_animation.fromValue = @0;
_animation.delegate = self;
_animation.duration = 1.0f;
[_animation setValue:@"BasicAnimationEnd" forKey:@"animationName"];
[maskLayer addAnimation:_animation forKey:@"BasicAnimationEnd"];
}
}
@end
Copyright © 2017年ZaneWangWang. All rights reserved.
持续更新中...
