ios ~ CAShapeLayer 动画效果:strokeEn

作者: 阳光下的叶子呵 | 来源:发表于2022-03-29 12:11 被阅读0次

    CAShapeLayer结合CABasicAnimation使用:

    相关链接:
    【iOS开发:CAShapeLayer画圈:strokeEnd】
    【iOS CALayer组合动画实现loadingView】
    【CAShapeLayer Path Animation】

        // 圆弧虚线
        CAShapeLayer *toSunsetBackLineLayer = [CAShapeLayer layer];
        // 线宽
        toSunsetBackLineLayer.lineWidth = [UIScreen mainScreen].bounds.size.width/375*1; // 10 - 6 = 4
        toSunsetBackLineLayer.lineCap = kCALineCapButt;  // 端点样式
        toSunsetBackLineLayer.lineJoin = kCALineCapButt; // 终点处理
        // 线条的颜色
        toSunsetBackLineLayer.strokeColor = RGBA(221, 221, 221, 1).CGColor;
        // 背景填充色
        toSunsetBackLineLayer.fillColor = [UIColor clearColor].CGColor;
        // 设置线宽、线间距(虚线)
        [toSunsetBackLineLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:2], [NSNumber numberWithInt:2], nil]];
        // 设置半径
        CGFloat backRadius = [UIScreen mainScreen].bounds.size.width/375*132/2;
        
        // 初始化一个路径:创建圆弧 ,startAngle:起始点,endAngle:终止点,clockwise:顺时针方向 ,M_PI == π:3.1415926
        // bezierPathWithArcCenter 中心点,下面就让addSublayer了,那么就设置self.bezierBackImg.layer的 中心点就好了,宽/2,高/2
        UIBezierPath *backPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.big_toSunsetBackView.frame.size.width/2, [UIScreen mainScreen].bounds.size.width/375*132/2 + 9) radius:backRadius startAngle:(1.25*M_PI) endAngle:(1.75*M_PI) clockwise:YES]; // 终止点(60%几率时):(2*0.6 - 0.25)*M_PI,clockwise 顺时针 YES, 逆时针 NO
        
        // 将UIBezierPath类转换成CGPath,类似于UIColor的CGColor
        toSunsetBackLineLayer.path = [backPath CGPath];
        [self.big_toSunsetBackViewLayer addSublayer:toSunsetBackLineLayer];
    
        /// 贝塞尔曲线(进度)
        CAShapeLayer *progressLineLayer = [CAShapeLayer layer];
        // 线宽
        progressLineLayer.lineWidth = [UIScreen mainScreen].bounds.size.width/375*2; // 10 - 6 = 4
        progressLineLayer.lineCap = kCALineCapSquare;  // 端点样式
        progressLineLayer.lineJoin = kCALineCapSquare; // 终点处理
        // 线条的颜色
        progressLineLayer.strokeColor = RGBA(255, 196, 15, 1).CGColor;
        // 背景填充色
        progressLineLayer.fillColor = [UIColor clearColor].CGColor;
    //    progressLineLayer.strokeEnd = 0.0;//结束点
    //    progressLineLayer.strokeStart = 1.0;//开始点
        
        // 设置线宽、线间距(虚线)
    //        [progressLineLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:2], [NSNumber numberWithInt:2], nil]];
        // 设置半径
        CGFloat progressRadius = [UIScreen mainScreen].bounds.size.width/375*132/2;
        
        // 初始化一个路径:创建圆弧 ,startAngle:起始点,endAngle:终止点,clockwise:顺时针方向 ,M_PI == π:3.1415926
        // bezierPathWithArcCenter 中心点,下面就让addSublayer了,那么就设置self.bezierBackImg.layer的 中心点就好了,宽/2,高/2
        UIBezierPath *progressPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.big_toSunsetBackView.frame.size.width/2, [UIScreen mainScreen].bounds.size.width/375*132/2 + 9) radius:progressRadius startAngle:(1.25*M_PI) endAngle:((1.25 + 0.5*(_dailyModel.toSunset))*M_PI) clockwise:YES]; // 终止点(60%几率时):(2*0.6 - 0.25)*M_PI,clockwise 顺时针 YES, 逆时针 NO
    
        // 将UIBezierPath类转换成CGPath,类似于UIColor的CGColor
        progressLineLayer.path = [progressPath CGPath];
        [self.big_toSunsetBackViewLayer addSublayer:progressLineLayer];
    
        // 当前path的位置,可以理解为path的终点:
        UIBezierPath *sunPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.big_toSunsetBackView.frame.size.width/2, [UIScreen mainScreen].bounds.size.width/375*132/2 + 9) radius:progressRadius startAngle:(1.25*M_PI) endAngle:((1.25 + 0.5*(_dailyModel.toSunset))*M_PI) clockwise:YES];
        CGPoint currentPoint = sunPath.currentPoint;
        _toSunsetImg = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width/375*20, [UIScreen mainScreen].bounds.size.width/375*20)];
    //    self.toSunsetImg.center = currentPoint;
        self.toSunsetImg.backgroundColor = [UIColor clearColor];
        self.toSunsetImg.image = [UIImage imageNamed:@"club_sun"];
        [self.big_toSunsetBackView addSubview:self.toSunsetImg];
        
        
        UIBezierPath *sunStartPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.big_toSunsetBackView.frame.size.width/2, [UIScreen mainScreen].bounds.size.width/375*132/2 + 9) radius:progressRadius startAngle:(1.25*M_PI) endAngle:(1.25*M_PI) clockwise:YES];
        CGPoint startPoint = sunStartPath.currentPoint;
        self.toSunsetImg.center = startPoint;
    
        // 添加 太阳☀️图片动画效果
        CAKeyframeAnimation* keyFrameAni = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        keyFrameAni.repeatCount = 1;
        keyFrameAni.path = sunPath.CGPath;
        keyFrameAni.duration = 3;
        keyFrameAni.beginTime = CACurrentMediaTime(); // 开始时间:当期那时间秒(绝对值)
        keyFrameAni.fillMode = kCAFillModeForwards;
        keyFrameAni.removedOnCompletion = NO;
        [self.toSunsetImg.layer addAnimation:keyFrameAni forKey:@"keyFrameAnimation"];
        
        // 线条 动画效果
        CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        pathAnima.duration = 3.0f;//动画时间
        pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
        pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];//开始点
        pathAnima.toValue = [NSNumber numberWithFloat:1.0f];//结束点
        pathAnima.fillMode = kCAFillModeForwards;
        pathAnima.removedOnCompletion = NO;
        [progressLineLayer addAnimation:pathAnima forKey:@"strokeEnd"];
    

    相关文章

      网友评论

        本文标题:ios ~ CAShapeLayer 动画效果:strokeEn

        本文链接:https://www.haomeiwen.com/subject/jypvjrtx.html