iOS~ 贝塞尔曲线:UIBezierPath和CAShapeLayer

ios ~ CAShapeLayer 动画效果:strokeEn

2022-03-29  本文已影响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"];
上一篇下一篇

猜你喜欢

热点阅读