弧形转圈圈 带渐变色

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

效果如下:


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

相关文章推荐

iOS 转圈圈的动画

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

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

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

Android ProgressBar自定义图片进度,自定义渐变色进度条

 1 2 3 4 5 6 7 java.lang.Object    ↳    android.view.View       ...

android渐变色

canvas-渐变色

canvas-渐变色 #canvas{ border: 1px solid palevioletred; } ...

渐变色旋转

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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