WechatIMG20.jpeg
原理：UIBezierPath和CAShapeLayer的使用：
其中太阳的图标，位置是 贝塞尔path的currentPoint(即当前的端点 = 终点)
iOS UIBezierPath(贝塞尔曲线) 中的方法和属性
CGPoint currentPoint = sunPath.currentPoint;
代码：
// Model 中的数据：
@property (nonatomic, assign) CGFloat toSunset; // 日落：太阳☀️ （圆弧曲线）0~1（0 日出，1 日落）
// GWCW_Club_ActualWeatherSunriseCell.m
// 日出 + 日落
#import "GWCW_Club_ActualWeatherSunriseCell.h"
@interface GWCW_Club_ActualWeatherSunriseCell ()
@property (nonatomic, strong) UIImageView *sunriseImg;
@property (nonatomic, strong) UIImageView *sunsetImg;
@property (nonatomic, strong) UILabel *sunriseTimeL;
@property (nonatomic, strong) UILabel *sunsetTimeL;
@property (nonatomic, strong) CAShapeLayer *sunLayer; // 父layer ，[self.sunLayer removeFromSuperlayer]; // 防止重用 在cell中时
@property (nonatomic, strong) UIImageView *sunImg; // 太阳图标
@end
@implementation GWCW_Club_ActualWeatherSunriseCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.selectionStyle = UITableViewCellSelectionStyleNone;
self.backgroundColor = ColorGlobalBalck;
[self setupUI];
}
return self;
}
- (void)prepareForReuse {
[super prepareForReuse];
self.sunriseImg.image = nil;
self.sunriseTimeL.text = nil;
self.sunsetImg.image = nil;
self.sunsetTimeL.text = nil;
[self.sunLayer removeFromSuperlayer]; // 防止重用 在cell中时
self.sunImg.image = nil;
}
- (void)setWeatherModel:(GWActualMatchWeatherModel *)weatherModel {
_weatherModel = weatherModel;
self.sunriseImg.image = [UIImage imageNamed:@"new_weather_White日出_icon"];
self.sunriseTimeL.text = _weatherModel.sunrise;
self.sunsetImg.image = [UIImage imageNamed:@"new_weather_White日落_icon"];
self.sunsetTimeL.text = _weatherModel.sunset;
/// 贝塞尔曲线
_sunLayer = [[CAShapeLayer alloc] init];
_sunLayer.strokeColor = [UIColor clearColor].CGColor;
UIBezierPath *bezierPath = [UIBezierPath
bezierPathWithRoundedRect:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, self.frame.size.height)
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake([UIScreen mainScreen].bounds.size.width/375*0, [UIScreen mainScreen].bounds.size.width/375*0)];
_sunLayer.lineWidth = [UIScreen mainScreen].bounds.size.width/375*0.01;
// 颜色
_sunLayer.strokeColor = [UIColor clearColor].CGColor;
// 背景填充色
_sunLayer.fillColor = [UIColor clearColor].CGColor;
_sunLayer.path = [bezierPath CGPath];
[self.contentView.layer addSublayer:self.sunLayer];
// 圆弧虚线
CAShapeLayer *backLineLayer = [CAShapeLayer layer];
// 线宽
backLineLayer.lineWidth = [UIScreen mainScreen].bounds.size.width/375*1; // 10 - 6 = 4
backLineLayer.lineCap = kCALineCapButt; // 端点样式
backLineLayer.lineJoin = kCALineCapButt; // 终点处理
// 线条的颜色
backLineLayer.strokeColor = [UIColor whiteColor].CGColor;
// 背景填充色
backLineLayer.fillColor = [UIColor clearColor].CGColor;
// 设置线宽、线间距（虚线）
[backLineLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:2], [NSNumber numberWithInt:2], nil]];
// 设置半径
CGFloat backRadius = [UIScreen mainScreen].bounds.size.width/375*250/2;
// 初始化一个路径：创建圆弧 ，startAngle：起始点，endAngle：终止点，clockwise：顺时针方向 ，M_PI == π：3.1415926
// bezierPathWithArcCenter 中心点，下面就让addSublayer了，那么就设置self.bezierBackImg.layer的 中心点就好了，宽/2,高/2
UIBezierPath *backPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake([UIScreen mainScreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.width/375*250/2+15) 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
backLineLayer.path = [backPath CGPath];
[self.sunLayer addSublayer:backLineLayer];
/// 贝塞尔曲线（进度）
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 setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:2], [NSNumber numberWithInt:2], nil]];
// 设置半径
CGFloat progressRadius = [UIScreen mainScreen].bounds.size.width/375*250/2;
// 初始化一个路径：创建圆弧 ，startAngle：起始点，endAngle：终止点，clockwise：顺时针方向 ，M_PI == π：3.1415926
// bezierPathWithArcCenter 中心点，下面就让addSublayer了，那么就设置self.bezierBackImg.layer的 中心点就好了，宽/2,高/2
UIBezierPath *progressPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake([UIScreen mainScreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.width/375*250/2+15) radius:progressRadius startAngle:(1.25*M_PI) endAngle:((1.25 + 0.5*(_weatherModel.toSunset))*M_PI) clockwise:YES]; // 终止点（60%几率时）：(2*0.6 - 0.25)*M_PI，clockwise 顺时针 YES， 逆时针 NO
// UIBezierPath *progressStartPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake([UIScreen mainScreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.width/375*250/2+15) radius:progressRadius startAngle:(1.25*M_PI) endAngle:(1.25*M_PI) clockwise:YES];
// 将UIBezierPath类转换成CGPath，类似于UIColor的CGColor
progressLineLayer.path = [progressPath CGPath];
[self.sunLayer addSublayer:progressLineLayer];
// 当前path的位置，可以理解为path的终点：
UIBezierPath *sunPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake([UIScreen mainScreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.width/375*250/2+15) radius:progressRadius startAngle:(1.25*M_PI) endAngle:((1.25 + 0.5*(_weatherModel.toSunset))*M_PI) clockwise:YES];
CGPoint currentPoint = sunPath.currentPoint;
_sunImg = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width/375*15, [UIScreen mainScreen].bounds.size.width/375*15)];
// self.sunImg.center = currentPoint;
self.sunImg.backgroundColor = [UIColor clearColor];
self.sunImg.image = [UIImage imageNamed:@"club_sun"];
[self.contentView addSubview:self.sunImg];
// 开始位置
UIBezierPath *sunStartPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake([UIScreen mainScreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.width/375*250/2+15) radius:progressRadius startAngle:(1.25*M_PI) endAngle:(1.25*M_PI) clockwise:YES];
CGPoint startPoint = sunStartPath.currentPoint;
self.sunImg.center = startPoint;
// 添加动画效果
CAKeyframeAnimation* keyFrameAni = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyFrameAni.repeatCount = 1;
keyFrameAni.path = sunPath.CGPath;
keyFrameAni.duration = 2;
keyFrameAni.beginTime = CACurrentMediaTime();
// fillMode主要是决定显示layer在动画完成后的状态..一般和removedOnCompletion一起使用..
keyFrameAni.fillMode = kCAFillModeForwards;
keyFrameAni.removedOnCompletion = NO; // YES 动画完成后会回到原始状态，NO 动画完成后会保持状态
[self.sunImg.layer addAnimation:keyFrameAni forKey:@"keyFrameAnimation"];
// 线条 动画效果
CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnima.duration = 2.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"];
}
- (void)setupUI {
_sunriseImg = [[UIImageView alloc] init];
self.sunriseImg.image = [UIImage imageNamed:@"new_weather_White日出_icon"];
[self.contentView addSubview:self.sunriseImg];
[self.sunriseImg makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.mas_left).offset([UIScreen mainScreen].bounds.size.width/375*20);
make.bottom.mas_equalTo(self.mas_bottom).offset(-[UIScreen mainScreen].bounds.size.width/375*16);
make.width.height.mas_equalTo([UIScreen mainScreen].bounds.size.width/375*14);
}];
_sunriseTimeL = [[UILabel alloc] init];
_sunriseTimeL.textColor = [UIColor whiteColor];
_sunriseTimeL.textAlignment = NSTextAlignmentLeft;
_sunriseTimeL.font = [UIFont systemFontOfSize:[UIScreen mainScreen].bounds.size.width/375*13 weight:UIFontWeightRegular];
[self.contentView addSubview:self.sunriseTimeL];
[self.sunriseTimeL makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self.sunriseImg);
make.left.mas_equalTo(self.sunriseImg.mas_right).offset([UIScreen mainScreen].bounds.size.width/375*6);
}];
_sunsetImg = [[UIImageView alloc] init];
self.sunsetImg.image = [UIImage imageNamed:@"new_weather_White日落_icon"];
[self.contentView addSubview:self.sunsetImg];
[self.sunsetImg makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self.sunriseImg);
make.right.mas_equalTo(self.mas_right).offset(-[UIScreen mainScreen].bounds.size.width/375*72);
make.width.height.mas_equalTo([UIScreen mainScreen].bounds.size.width/375*14);
}];
_sunsetTimeL = [[UILabel alloc] init];
_sunsetTimeL.textColor = [UIColor whiteColor];
_sunsetTimeL.textAlignment = NSTextAlignmentLeft;
_sunsetTimeL.font = [UIFont systemFontOfSize:[UIScreen mainScreen].bounds.size.width/375*13 weight:UIFontWeightRegular];
[self.contentView addSubview:self.sunsetTimeL];
[self.sunsetTimeL makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self.sunriseImg);
make.left.mas_equalTo(self.sunsetImg.mas_right).offset([UIScreen mainScreen].bounds.size.width/375*6);
}];
}
- (void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
@end
