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"];