ios ~ 贝塞尔曲线：UIBezierPath和CAShape

WechatIMG20.jpeg

原理：UIBezierPath和CAShapeLayer的使用：

其中太阳的图标，位置是 贝塞尔path的currentPoint(即当前的端点 = 终点)
iOS UIBezierPath(贝塞尔曲线) 中的方法和属性
CGPoint currentPoint = sunPath.currentPoint;
代码：

// Model 中的数据：
@property (nonatomic, assign) CGFloat   toSunset; // 日落：太阳☀️ （圆弧曲线）0~1（0 日出，1 日落）

#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;
    
    
    /// 贝塞尔曲线（父layer，如果在cell中使用，每次重用时removeFromSuperlayer删除一下）
    _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 -0.6))*M_PI) clockwise:YES]; // 终止点（60%几率时）：(2*0.6 - 0.25)*M_PI，clockwise 顺时针 YES， 逆时针 NO

    // 将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-0.6))*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; // 设置太阳☀️图片的中心点，就是当前的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 = 3;
    keyFrameAni.beginTime = CACurrentMediaTime() + 1;
    // fillMode主要是决定显示layer在动画完成后的状态..一般和removedOnCompletion一起使用..
    keyFrameAni.fillMode = kCAFillModeForwards;
    keyFrameAni.removedOnCompletion = NO; // YES 动画完成后会回到原始状态，NO 动画完成后会保持状态
    [self.sunImg.layer addAnimation:keyFrameAni forKey:@"keyFrameAnimation"];
    
}

- (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