画渐变半圆

1、先创建一个UIView的子类CirlceView 

CircleView *circle = [[CircleView alloc] initWithFrame:CGRectMake(80, 100, 200, 200)];
circle.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:circle];

 2、设置圆的路径


    //设置画笔路径
//   四分之三圆路径
//    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0) radius:self.frame.size.width/2.0 - 10 startAngle:M_PI*0.8 endAngle: M_PI * 0.2 clockwise:YES];

//    二分之一圆路径
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0) radius:self.frame.size.width/2.0 - 10 startAngle:M_PI endAngle: 0 clockwise:YES];

3、填充渐变颜色,分左右两部分,

//    颜色填充
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;
    
    CALayer *gradientLayer = [CALayer layer];
    gradientLayer.frame = self.bounds;
    
    CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];
    gradientLayer2.frame = CGRectMake(0, 0, width/2.0,  height/2);
    gradientLayer2.colors = @[(__bridge id)[UIColor orangeColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor];
    [gradientLayer2 setLocations:@[@0.3, @0.8,@1]];
    gradientLayer2.startPoint = CGPointMake(0, 0);
    gradientLayer2.endPoint = CGPointMake(0, 1);
    [gradientLayer addSublayer:gradientLayer2];
    
    CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
    gradientLayer1.frame = CGRectMake(width/2.0, 0, width/2.0,  height/2);
    gradientLayer1.colors = @[(__bridge id)[UIColor orangeColor].CGColor,(__bridge id)[UIColor redColor].CGColor];
    //startPoint和endPoint属性,他们决定了渐变的方向。这两个参数是以单位坐标系进行的定义,所以左上角坐标是{0, 0},右下角坐标是{1, 1}
    //startPoint和pointEnd 分别指定颜色变换的起始位置和结束位置.
    //当开始和结束的点的x值相同时, 颜色渐变的方向为纵向变化
    //当开始和结束的点的y值相同时, 颜色渐变的方向为横向变化
    //其余的 颜色沿着对角线方向变化
    gradientLayer1.startPoint = CGPointMake(0.2, 0);
    gradientLayer1.endPoint = CGPointMake(0.8, 1);
    [gradientLayer addSublayer:gradientLayer1];
    [self.layer addSublayer:gradientLayer];

4、画渐变半圆

@property (nonatomic, strong) CAShapeLayer *progressLayer;

//    画渐变圆形
    _progressLayer = [CAShapeLayer layer];
    _progressLayer.frame = self.bounds;
    _progressLayer.fillColor = [UIColor clearColor].CGColor;
    _progressLayer.strokeColor  = [UIColor colorWithRed:170/255.0 green:210/255.0 blue:254/255.0 alpha:1].CGColor;
    _progressLayer.lineWidth = 20;
    _progressLayer.path = path.CGPath;
    gradientLayer.mask = _progressLayer;
    _progressLayer.strokeStart = 0;
    _progressLayer.strokeEnd = 0;
//    颜色渐变过度
    [gradientLayer1 setLocations:@[@0.1, @0.8]];

5、创建定时器自动画圆

    [NSTimer scheduledTimerWithTimeInterval:0.1f target:self selector:@selector(animate) userInfo:nil repeats:YES];
- (void)animate {
    _progressLayer.strokeEnd += 0.05;
}

效果如下:

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值