弧形转圈圈 带渐变色

原创 2015年07月08日 16:23:23
    UILabel *label = [[UILabel alloc] init];
    label.text = @"价";
    label.frame = CGRectMake(250, 450, 50, 50);
    label.textAlignment = NSTextAlignmentCenter;

    [self.view addSubview:label];
    
    CGPoint point = CGPointMake(label.frame.size.width/2, label.frame.size.width/2);

    //将贝塞尔曲线 调小一点点就好
    UIBezierPath *p = [UIBezierPath bezierPathWithArcCenter:point radius:24.0f startAngle:.0f endAngle:2*M_PI clockwise:YES];
    
    CAGradientLayer *_gl = [CAGradientLayer layer];
    _gl.frame = label.bounds;
    
    CAShapeLayer *backGroundLayer = [CAShapeLayer layer];
    backGroundLayer.fillColor = [UIColor clearColor].CGColor;
    backGroundLayer.strokeColor = [UIColor redColor].CGColor;
    backGroundLayer.lineCap = kCALineCapRound;
    backGroundLayer.lineJoin = kCALineJoinRound;
    backGroundLayer.path = p.CGPath;
    backGroundLayer.lineWidth = 1;
    backGroundLayer.frame = _gl.bounds;
    
    _gl.startPoint = CGPointMake(.0f, .5f);
    _gl.endPoint = CGPointMake(1.f, .5f);
    _gl.mask = backGroundLayer;
    
    //做出渐变色
    UIColor *ringColor = [UIColor redColor];
    NSMutableArray *colors = [NSMutableArray new];
    for(int i = 20; i >= 0; i-=2) {
        [colors addObject:(__bridge id)[ringColor colorWithAlphaComponent:i*.1f].CGColor];
    }
    _gl.colors = colors;
    
    [label.layer addSublayer:_gl];
    
    
    CABasicAnimation *animate = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    animate.byValue = @(M_PI*2);
    animate.duration = 1;
    animate.repeatCount = MAXFLOAT;
    [_gl addAnimation:animate forKey:@"animate"];

效果如下:


版权声明:本文为博主原创文章,未经博主允许不得转载。

C#GDI画立体渐变圆角panel

为要处理的panel添加绘画事件,代码写在panel的Paint事件中:  private void panel1_Paint(object sender, PaintEventArgs e)    ...

Android实现圆弧形渐变色进度条

效果图:我写的这篇博客个人感觉非常的不详细,这也是根据UI设计的,不过大家掌握下文所点出来的重点方法也可以将其绘制出来,这里就不详细介绍绘制流程了 UI分析:这个UI细分为表盘刻度、进度条底色、进度...

iOS 转圈圈的动画

- (void)startSpin {//创建动画并转动 zhuangtai=bofang; [CATransaction begin]; [CATransaction setVal...

使用纯CSS3设计加载转圈圈页面

.spinner { margin: 100px auto; width: 20px; height: 20px; position: relative; } .container...

白色炫酷加载时候转圈圈功能

  • 2016年10月13日 08:44
  • 97KB
  • 下载

android shape的使用详解以及常用效果(渐变色、分割线、边框、半透明阴影效果等)

shape使用、渐变色、分割线、边框、半透明、半透明阴影效果。 首先简单了解一下shape中常见的属性。(详细介绍参看 api文档) 转载请注明:Rflyee_大飞:http://blog...

android渐变色

  • 2017年08月23日 13:11
  • 4KB
  • 下载

iOS 渐变色 以及 镂空效果的实现(Mask的妙用)以及镂空文字的实现

实现起来也很简单,主要分3个步骤: 1.创建一个镂空的路径:   UIBezierPath 有个原生的方法- (void)appendPath:(UIBezierPath *)bezierPath...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:弧形转圈圈 带渐变色
举报原因:
原因补充:

(最多只允许输入30个字)