CAShapeLayer

CAShapeLayer属于QuartzCore框架,继承与CALayer,所以本质上CAShapeLayer是一个layer,layer有的属性他都有。CAShapeLayer是通过矢量图形而不是bitmap来绘制图层子类,指定诸如颜色和线宽等属性,用CGPath来绘制图形。CAShapeLayer主要作用是根据路径来绘制图形。只要给定一个路径然后他进行绘制,常用来和BezierPath配合使用。

相关属性

CGPathRef path 路径
 CGColorRef fillcolor 填充颜色

 CGColorRef strokeColor 路径颜色
 CGFloat strokeStart 开始值0-1
 CGFloat strokeEnd   结束值0-1
 CGFloat lineWidth   线宽
 CGFloat miterLimit  内角和外角距离
 
 
NSString fillRule 填充规则,默认非零法则,奇偶原则
  `fillRule' values.

CA_EXTERN NSString *const kCAFillRuleNonZero    //非零
CA_EXTERN NSString *const kCAFillRuleEvenOdd    //齐偶

 
 
 
 NSString lineCap。   线端口(开始点和结束点)类型
 
CA_EXTERN NSString *const kCALineCapButt 方形结束, 结束位置正好为精确位置。——默认值
CA_EXTERN NSString *const kCALineCapRound 圆角
CA_EXTERN NSString *const kCALineCapSquare //方形结束, 结束位置超过精确位置半个线宽。
 
 NSString lineJoin    线连接处类型
 
CA_EXTERN NSString *const kCALineJoinMiter 尖角 默认
CA_EXTERN NSString *const kCALineJoinRound 圆角
CA_EXTERN NSString *const kCALineJoinBevel 斜角

 CGFloat。 lineDashPhase 绘制虚线路径 线性模版起始位置
 
 NSArray<NSNumber *> *lineDashPattern。 线性模版,数组实线和虚线循环 @[@6,@6]该属性默认是实线绘制,如果设置那么就是设置线新大小的值设置越大线体粒子越大,反之越小,前一个值设置线性粒子粗细,后一个值设置间隔粗细

demo
1.和bezierPath配合进行画圆

@property(nonatomic,strong) CAShapeLayer *layer; 绘制
@property(nonatomic,strong) NSTimer *waterTimer; 定时器

- (void)viewDidLoad {
    [super viewDidLoad];

  //圆
    UIBezierPath *bezi = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)];
    
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    //路径
    layer.path = bezi.CGPath;
    
    //路径颜色
    layer.strokeColor = [UIColor redColor].CGColor;
    //填充色
    layer.fillColor = [UIColor whiteColor].CGColor;
    //线宽
    layer.lineWidth = 15;
    //开始值 先不设置在定时器中设置让他循环填充
    layer.strokeStart = 0;
    //结束值
    layer.strokeEnd = 0;
    //默认不设置是实线绘制,如果设置那么会虚线绘制前一个值是绘制虚线粗细,后一个值间隔粗细
   // layer.lineDashPattern = @[@6,@2];
    [self.showView.layer addSublayer:layer];
    self.layer = layer;
    
    self.waterTimer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(waterAction) userInfo:nil repeats:YES];


}

- (void)waterAction{
    if (self.layer.strokeEnd >=1) {
        销毁定时器
        [self.waterTimer invalidate];
        self.waterTimer = nil;
        return;
    }else{
         每次+0.02;
        self.layer.strokeEnd +=0.02;
    }
}

demo2 渐变色圆形进度条
需要用到的知识:mask遮罩+CAGradientLayer渐变+BezierPath+CASapeLayer

@property(nonatomic,strong)UIView *contentMaksView; 遮罩层
@property(nonatomic,strong) CAGradientLayer *gradlayer; 渐变layer
@property(nonatomic,strong) NSTimer *waterTimer; 定时器
@property(nonatomic,strong) CAShapeLayer *shapeLayer; 绘制layer

 //贝塞尔曲线路径画圆
    UIBezierPath *bezi = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10,10,100,100)];
    //创建绘制对象
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    //获取路径
    layer.path = bezi.CGPath;
    
    //路径颜色
    layer.strokeColor = [UIColor redColor].CGColor;
    //填充色
    layer.fillColor = [UIColor whiteColor].CGColor;
    //线宽
    layer.lineWidth = 15;
    //开始值
    layer.strokeStart = 0;
    //结束值
    layer.strokeEnd = 0;
    //默认,不设置是实线绘制,如果设置那么会虚线绘制前一个值是绘制虚线粗细,后一个值间隔粗细
    layer.lineDashPattern = @[@6,@2];
    self.shapeLayer = layer;

 //渐变图层
    _gradlayer = [CAGradientLayer layer];
    
    [ _gradlayer setStartPoint:CGPointMake(0.3, 0.5)];
    
    [ _gradlayer setEndPoint:CGPointMake(1, 1)];
    _gradlayer.frame = CGRectMake(0,0,frame.size.width, frame.size.height);
     _gradlayer.colors=@[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor brownColor].CGColor,(id)[UIColor purpleColor].CGColor];
    [ _gradlayer setLocations:@[@0.2,@0.4,@0.7,@1.0]];

  //渐变图层上添加一个遮挡图层,在渐变图层上显示遮挡图层形状,
    [_gradlayer setMask:_shapeLayer];
    //将渐变图层加入到view的layer上
    [self.layer addSublayer:_gradlayer];


    //遮挡图层
    _contentMaksView = [[UIView alloc]initWithFrame:CGRectMake(9,9,102,102)];
    _contentMaksView.layer.cornerRadius = 50;
     _contentMaksView.layer.masksToBounds = YES;
    _contentMaksView.backgroundColor = [UIColor whiteColor];
  [self addSubview:_contentMaksView];


    //定时器
   self.waterTimer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(waterAction) userInfo:nil repeats:YES];


- (void)waterAction{
    if (self.shapeLayer.strokeEnd >=1) {
        [self.waterTimer invalidate];
        self.waterTimer = nil;
        return;
    }else{
        self.shapeLayer.strokeEnd +=0.02;
      
    }
}

效果图
在这里插入图片描述

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为下列代码实现可暂停效果: import UIKit class ViewController: UIViewController { private let radarAnimation = "radarAnimation" private var animationLayer: CALayer? private var animationGroup: CAAnimationGroup? private var opBtn: UIButton! override func viewDidLoad() { super.viewDidLoad() let first = makeRadarAnimation(showRect: CGRect(x: 120, y: 100, width: 100, height: 100), isRound: true) view.layer.addSublayer(first) opBtn = UIButton(frame: CGRect(x: 100, y: 450, width: 80, height: 80)) opBtn.backgroundColor = UIColor.red opBtn.clipsToBounds = true opBtn.setTitle("Hsu", for: .normal) opBtn.layer.cornerRadius = 10 view.addSubview(opBtn) let second = makeRadarAnimation(showRect: opBtn.frame, isRound: false) view.layer.insertSublayer(second, below: opBtn.layer) } @IBAction func startAction(_ sender: UIButton) { animationLayer?.add(animationGroup!, forKey: radarAnimation) } @IBAction func stopAction(_ sender: UIButton) { animationLayer?.removeAnimation(forKey: radarAnimation) } private func makeRadarAnimation(showRect: CGRect, isRound: Bool) -> CALayer { // 1. 一个动态波 let shapeLayer = CAShapeLayer() shapeLayer.frame = showRect // showRect 最大内切圆 if isRound { shapeLayer.path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: showRect.width, height: showRect.height)).cgPath } else { // 矩形 shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: showRect.width, height: showRect.height), cornerRadius: 10).cgPath } shapeLayer.fillColor = UIColor.orange.cgColor // 默认初始颜色透明度 shapeLayer.opacity = 0.0 animationLayer = shapeLayer // 2. 需要重复的动态波,即创建副本 let replicator = CAReplicatorLayer() replicator.frame = shapeLayer.bounds replicator.instanceCount = 4 replicator.instanceDelay = 1.0 replicator.addSublayer(shapeLayer) // 3. 创建动画组 let opacityAnimation = CABasicAnimation(keyPath: "opacity") opacityAnimation.fromValue = NSNumber(floatLiteral: 1.0) // 开始透明度 opacityAnimation.toValue = NSNumber(floatLiteral: 0) // 结束时透明底 let scaleAnimation = CABasicAnimation(keyPath: "transform") if isRound { scaleAnimation.fromValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 0, 0, 0)) // 缩放起始大小 } else { scaleAnimation.fromValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 0)) // 缩放起始大小 } scaleAnimation.toValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.5, 1.5, 0)) // 缩放结束大小 let animationGroup = CAAnimationGroup() animationGroup.animations = [opacityAnimation, scaleAnimation] animationGroup.duration = 3.0 // 动画执行时间 animationGroup.repeatCount = HUGE // 最大重复 animationGroup.autoreverses = false self.animationGroup = animationGroup shapeLayer.add(animationGroup, forKey: radarAnimation) return replicator } }
最新发布
06-03
为了实现可暂停效果,我们需要记录动画的当前状态并在暂停时保存状态,在恢复时重新加载状态。 首先,我们需要添加一个布尔类型的变量 `isPaused` 来记录动画是否被暂停: ```swift private var isPaused = false ``` 然后,我们需要修改 `startAction` 和 `stopAction` 方法来支持暂停和恢复动画: ```swift @IBAction func startAction(_ sender: UIButton) { if isPaused { // 如果动画已经被暂停,则恢复动画 animationLayer?.speed = 1.0 isPaused = false } else { // 否则开始动画 animationLayer?.add(animationGroup!, forKey: radarAnimation) } } @IBAction func stopAction(_ sender: UIButton) { if let animationLayer = animationLayer { // 保存动画状态 let pausedTime = animationLayer.convertTime(CACurrentMediaTime(), from: nil) animationLayer.speed = 0.0 animationLayer.timeOffset = pausedTime isPaused = true } } ``` 在 `startAction` 方法中,我们检查动画是否已经被暂停。如果已经被暂停,则恢复动画的速度,并将 `isPaused` 设置为 `false`。否则,开始动画。 在 `stopAction` 方法中,我们保存动画的时间偏移量和速度,并将 `isPaused` 设置为 `true`。 最后,我们需要在 `viewDidLoad` 方法中添加一个触摸手势来暂停动画: ```swift let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTapGesture(_:))) view.addGestureRecognizer(tapGesture) ``` 并且实现 `handleTapGesture` 方法: ```swift @objc private func handleTapGesture(_ gesture: UITapGestureRecognizer) { if !isPaused { stopAction(opBtn) } } ``` 这个方法会在用户触摸屏幕时被调用,并停止动画。如果动画已经被暂停,则不做任何事情。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值