IOS 渐变色CAGradientLayer的一些属性解析

亦凉 2022-08-23 09:59 298阅读 0赞

CAGradientLayer的一些属性解析

![180835033957597.gif][]

iOS中Layer的坐标系统:

![180835350983550.png][]

效果:

![180836284895260.png][]

![复制代码][copycode.gif]

- (void)viewDidLoad
    {
        [super viewDidLoad];
    
        CAGradientLayer *colorLayer = [CAGradientLayer layer];
        colorLayer.frame    = (CGRect){CGPointZero, CGSizeMake(200, 200)};
        colorLayer.position = self.view.center;
        [self.view.layer addSublayer:colorLayer];
    
        // 颜色分配
        colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                              (__bridge id)[UIColor greenColor].CGColor,
                              (__bridge id)[UIColor blueColor].CGColor];
        
        // 颜色分割线
        colorLayer.locations  = @[@(0.25), @(0.5), @(0.75)];
        
        // 起始点
        colorLayer.startPoint = CGPointMake(0, 0);
        
        // 结束点
        colorLayer.endPoint   = CGPointMake(1, 0);
    }

![复制代码][copycode.gif]

![180840433795365.png][]

颜色分配严格遵守Layer的坐标系统,locations,startPoint,endPoint都是以Layer坐标系统进行计算的.

而locations并不是表示颜色值所在位置,它表示的是颜色在Layer坐标系相对位置处要开始进行渐变颜色了.

![180845325982423.png][]

CAGradientLayer 的这四个属性 colors locations startPoint endPoint 都是可以进行动画的哦.

附录:

稍微复杂点的动画效果

![180903250672834.gif][]

![复制代码][copycode.gif]

//
    //  RootViewController.m
    //
    //  Copyright (c) 2014年 Y.X. All rights reserved.
    //
    
    #import "RootViewController.h"
    #import "YXGCD.h"
    
    @interface RootViewController ()
    
    @property (nonatomic, strong) GCDTimer  *timer;
    
    @end
    
    @implementation RootViewController
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
    
        CAGradientLayer *colorLayer = [CAGradientLayer layer];
        colorLayer.backgroundColor = [UIColor blueColor].CGColor;
        colorLayer.frame    = (CGRect){CGPointZero, CGSizeMake(200, 200)};
        colorLayer.position = self.view.center;
        [self.view.layer addSublayer:colorLayer];
    
        // 颜色分配
        colorLayer.colors = @[(__bridge id)[UIColor cyanColor].CGColor,
                              (__bridge id)[UIColor orangeColor].CGColor,
                              (__bridge id)[UIColor magentaColor].CGColor];
        
        // 起始点
        colorLayer.startPoint = CGPointMake(0, 0);
        
        // 结束点
        colorLayer.endPoint   = CGPointMake(1, 0);
        
        _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
        [_timer event:^{
            
            static CGFloat test = - 0.1f;
            
            if (test >= 1.1)
            {
                test = - 0.1f;
                [CATransaction setDisableActions:YES];
                colorLayer.locations  = @[@(test), @(test + 0.05), @(test + 0.1)];
            }
            else
            {
                [CATransaction setDisableActions:NO];
                colorLayer.locations  = @[@(test), @(test + 0.05), @(test + 0.1)];
            }
            
            test += 0.1f;
            
        } timeInterval:NSEC_PER_SEC];
        [_timer start];
    }
    
    @end

![复制代码][copycode.gif]

![180907068791000.gif][]

![复制代码][copycode.gif]

_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
        [_timer event:^{
            
            static CGFloat test = - 0.1f;
            
            if (test >= 1.1)
            {
                test = - 0.1f;
                [CATransaction setDisableActions:NO];
                colorLayer.locations  = @[@(test), @(test + 0.01), @(test + 0.011)];
            }
            else
            {
                [CATransaction setDisableActions:NO];
                colorLayer.locations  = @[@(test), @(test + 0.01), @(test + 0.011)];
            }
            
            test += 0.1f;
            
        } timeInterval:NSEC_PER_SEC];
        [_timer start];

![复制代码][copycode.gif]

配合CAShapeLayer使用

![181332304573141.gif][]

![复制代码][copycode.gif]

//
    //  RootViewController.m
    //
    //  Copyright (c) 2014年 Y.X. All rights reserved.
    //
    
    #import "RootViewController.h"
    #import "YXGCD.h"
    
    @interface RootViewController ()
    
    @property (nonatomic, strong) GCDTimer  *timer;
    
    @end
    
    // 将常数转换为度数
    #define   DEGREES(degrees)  ((M_PI * (degrees))/ 180.f)
    
    @implementation RootViewController
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        self.view.backgroundColor = [UIColor blackColor];
    
        CAGradientLayer *colorLayer = [CAGradientLayer layer];
        colorLayer.backgroundColor = [UIColor blueColor].CGColor;
        colorLayer.frame    = (CGRect){CGPointZero, CGSizeMake(200, 200)};
        colorLayer.position = self.view.center;
        [self.view.layer addSublayer:colorLayer];
    
        // 颜色分配
        colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                              (__bridge id)[UIColor whiteColor].CGColor,
                              (__bridge id)[UIColor redColor].CGColor];
        colorLayer.locations  = @[@(-0.2), @(-0.1), @(0)];
        
        // 起始点
        colorLayer.startPoint = CGPointMake(0, 0);
        
        // 结束点
        colorLayer.endPoint   = CGPointMake(1, 0);
        
        CAShapeLayer *circle = [RootViewController LayerWithCircleCenter:CGPointMake(102, 100)
                                                                  radius:80
                                                              startAngle:DEGREES(0)
                                                                endAngle:DEGREES(360)
                                                               clockwise:YES
                                                         lineDashPattern:nil];
        circle.strokeColor = [UIColor redColor].CGColor;
        [self.view.layer addSublayer:circle];
        circle.strokeEnd = 1.f;
        colorLayer.mask = circle;
        
        _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
        [_timer event:^{
    
            static int i = 0;
            if (i++ % 2 == 0)
            {
                CABasicAnimation* fadeAnim = [CABasicAnimation animationWithKeyPath:@"locations"];
                fadeAnim.fromValue = @[@(-0.2), @(-0.1), @(0)];
                fadeAnim.toValue   = @[@(1.0), @(1.1), @(1.2)];
                fadeAnim.duration  = 1.5;
                [colorLayer addAnimation:fadeAnim forKey:nil];
            }
    
        } timeInterval:NSEC_PER_SEC];
        [_timer start];
    }
    
    + (CAShapeLayer *)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;
    }
    
    @end

![复制代码][copycode.gif]

[180835033957597.gif]: /images/20220721/1f2ab867cd4a4e11a93685e9e2b01ce3.png
[180835350983550.png]: /images/20220721/e260da5c22e640299dfb4a68e2219d0e.png
[180836284895260.png]: /images/20220721/aa2871b10b534a7c9c861a3144bca657.png
[copycode.gif]: /images/20220721/e4fd25ffe4824b54a2eddfefb756597f.png
[180840433795365.png]: /images/20220721/e5e8cd833be247d29b8e50bd3d18ebca.png
[180845325982423.png]: /images/20220721/6c80b3063bfd4367a4835c82bf7ee69b.png
[180903250672834.gif]: /images/20220721/32480c690f9f4feb8f98d39a63de1b15.png
[180907068791000.gif]: /images/20220721/10c87bc58e854b1fa9dc9b5ca92cc8f3.png
[181332304573141.gif]: /images/20220721/30198eea85964717a0994db42a4b4643.png