美文网首页
CAGradientLayer实现绚丽彩色圆(环)弧2

CAGradientLayer实现绚丽彩色圆(环)弧2

作者: Fendouzhe | 来源:发表于2017-12-15 12:20 被阅读0次

    效果:


    代码:

    #import <QuartzCore/QuartzCore.h>
    #import <UIKit/UIKit.h>
    
    // 将常数转换为度数
    #define   DEGREES(degrees)  ((M_PI * (degrees))/ 180.f)
    
    @interface CAShapeLayer (Circle)
    
    // 圆环
    + (instancetype)LayerWithCircleCenter:(CGPoint)point
                                   radius:(CGFloat)radius
                               startAngle:(CGFloat)startAngle
                                 endAngle:(CGFloat)endAngle
                                clockwise:(BOOL)clockwise
                          lineDashPattern:(NSArray *)lineDashPattern;
    
    // 圆
    + (instancetype)LayerWithCircleCenter:(CGPoint)point
                                   radius:(CGFloat)radius
                               startAngle:(CGFloat)startAngle
                                 endAngle:(CGFloat)endAngle
                                clockwise:(BOOL)clockwise;
    
    #import "CAShapeLayer+Circle.h"
    
    @implementation CAShapeLayer (Circle)
    
    + (instancetype)LayerWithCircleCenter:(CGPoint)point
                                   radius:(CGFloat)radius
                               startAngle:(CGFloat)startAngle
                                 endAngle:(CGFloat)endAngle
                                clockwise:(BOOL)clockwise
                          lineDashPattern:(NSArray *)lineDashPattern
    {
        CAShapeLayer *layer = [CAShapeLayer layer];
        
        // 贝塞尔曲线(创建一个圆)
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0)
                                                            radius:radius
                                                        startAngle:startAngle
                                                          endAngle:endAngle
                                                         clockwise:clockwise];
        
        // 获取path
        layer.path = path.CGPath;
        layer.position = point;
        
        // 设置填充颜色为透明
        layer.fillColor = [UIColor clearColor].CGColor;
        
        // 获取曲线分段的方式
        if (lineDashPattern)
        {
            layer.lineDashPattern = lineDashPattern;
        }
        
        return layer;
    }
    
    + (instancetype)LayerWithCircleCenter:(CGPoint)point
                                   radius:(CGFloat)radius
                               startAngle:(CGFloat)startAngle
                                 endAngle:(CGFloat)endAngle
                                clockwise:(BOOL)clockwise
    {
        CAShapeLayer *layer = [CAShapeLayer layer];
        
        // 贝塞尔曲线(创建一个圆)
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0)
                                                            radius:radius/2.f
                                                        startAngle:startAngle
                                                          endAngle:endAngle
                                                         clockwise:clockwise];
        
        // 获取path
        layer.path      = path.CGPath;
        layer.position  = point;
        layer.lineCap   = kCALineCapButt;
        layer.lineWidth = radius;
        
        // 设置填充颜色为透明
        layer.fillColor = [UIColor clearColor].CGColor;
        
        return layer;
    }
    
    #import "ViewController.h"
    #import "CAShapeLayer+Circle.h"
    
    @interface ViewController ()
    
    @property (nonatomic, strong) NSTimer         *timer;
    @property (nonatomic, strong) CAGradientLayer *faucet;
    @property (nonatomic, strong) CAShapeLayer    *circleLayer;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        // 设置背景色
        self.view.backgroundColor = [UIColor colorWithRed:0.878 green:0.878 blue:0.878 alpha:1];
        
        // 创建形状遮罩
        self.circleLayer = [CAShapeLayer LayerWithCircleCenter:CGPointMake(82, 82)
                                                        radius:80
                                                    startAngle:DEGREES(0)
                                                      endAngle:DEGREES(360)
                                                     clockwise:YES
                                               lineDashPattern:@[@10, @10]];
        self.circleLayer.strokeColor   = [UIColor blackColor].CGColor;  // 边缘线的颜色
        self.circleLayer.lineCap       = kCALineCapSquare;              // 边缘线的类型
        self.circleLayer.lineWidth     = 4.f;                           // 线条宽度
        self.circleLayer.strokeStart   = 0.0f;
        self.circleLayer.strokeEnd     = 1.0f;
        
        // 创建渐变图层
        self.faucet          = [CAGradientLayer layer];
        self.faucet.frame    = CGRectMake(0, 0, 200, 200);
        self.faucet.position = self.view.center;
        
        // 以CAShapeLayer的形状作为遮罩是实现特定颜色渐变的关键
        self.faucet.mask   = self.circleLayer;
        self.faucet.colors = @[(id)[UIColor greenColor].CGColor,
                               (id)[UIColor redColor].CGColor,
                               (id)[UIColor cyanColor].CGColor,
                               (id)[UIColor purpleColor].CGColor,
                               (id)[UIColor yellowColor].CGColor];
        
        // 设定动画时间
        self.faucet.speed = 0.5f;
        
        // 添加到系统图层中
        [self.view.layer addSublayer:self.faucet];
        
        // 创建定时器
        self.timer = [NSTimer scheduledTimerWithTimeInterval:1.f
                                                      target:self
                                                    selector:@selector(timerEvent)
                                                    userInfo:nil
                                                     repeats:YES];
    }
    
    /**
     *  定时器事件
     */
    - (void)timerEvent {
        self.faucet.colors = @[(id)[UIColor colorWithRed:arc4random()%255/255.f
                                                   green:arc4random()%255/255.f
                                                    blue:arc4random()%255/255.f
                                                   alpha:1].CGColor,
                               (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                   green:arc4random()%255/255.f
                                                    blue:arc4random()%255/255.f
                                                   alpha:1].CGColor,
                               (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                   green:arc4random()%255/255.f
                                                    blue:arc4random()%255/255.f
                                                   alpha:1].CGColor,
                               (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                   green:arc4random()%255/255.f
                                                    blue:arc4random()%255/255.f
                                                   alpha:1].CGColor,
                               (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                   green:arc4random()%255/255.f
                                                    blue:arc4random()%255/255.f
                                                   alpha:1].CGColor];
    }
    
    @end
    

    相关文章

      网友评论

          本文标题:CAGradientLayer实现绚丽彩色圆(环)弧2

          本文链接:https://www.haomeiwen.com/subject/rcorwxtx.html