CAGradientLayer基本使用方法-优快云博客

本文链接：https://blog.youkuaiyun.com/nvlangxin/article/details/51017150

本文详细介绍了如何使用CAGradientLayer在iOS应用中创建渐变色动画，包括设置坐标系统、渐变方向、颜色分割点及动画效果。通过实例代码展示渐变色在图像上的应用，并提供了代码实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Gradient：本身就是梯度的意思，所以在这里就是作为渐变色来理解
1，CAGradientLayer用于处理渐变色的层结构
2，CAGradientLayer的渐变色可以做隐式动画
3，大部分情况下，CAGradientLayer时和CAShapeLayer配合使用的。
4，CAGradientLayer可以用作PNG的遮罩效果

关于CAGradientLayer的坐标系统
为什么要提到CAGradientLayer的坐标系统呢？因为渐变色的作用范围，变化梯度的方向，颜色变换的作用点都和CAGradientLayer的坐标系统有关
这里写图片描述

根据上图的坐标，设定好起点和终点，渐变色的方向就会根据起点指向终点的方向来渐变了。后面会代码里会有写。

1，CAGradientLayer的坐标系统是从（0，0）到（1，1）绘制的矩形
2，CAGradientLayer的frame值的size不为正方形的话，坐标系统会被拉伸
3，CAGradientLayer的startPoint和endPoint会直接决定颜色的绘制方向
4，CAGradientLayer的颜色分割点时以0到1的比例来计算的

下面直接上代码，里面的注视都写好了。就不一一解释了

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
@property (nonatomic, strong) NSTimer *timer;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];
    imageView.frame = CGRectMake(0, 0, self.view.bounds.size.width, 200);
    [self.view addSubview:imageView];
    imageView.center = self.view.center;

    //初始化渐变图层
    self.gradientLayer = [CAGradientLayer layer];
    self.gradientLayer.frame = imageView.bounds;
    [imageView.layer addSublayer:self.gradientLayer];

    //设置渐变颜色方向
    self.gradientLayer.startPoint = CGPointMake(1, 1);
    self.gradientLayer.endPoint = CGPointMake(0, 0);
    //当前图层的右下角为(0.0)点坐标
    //当前图层的左上角为(1.1)点坐标


    //设定颜色组
    self.gradientLayer.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor blackColor].CGColor];

    //colors中的元素个数应该和locations中的元素个数相同,不然会导致颜色显示不完整
    //颜色分布为从colors中的第一个颜色,按照从(0.0)开始的顺序,根据分割点进行颜色渐变

    //设置颜色分割点
    self.gradientLayer.locations = @[@(0.0f),@(0.5f), @(1.0f)];//
    //分割点的颜色也是按照从左下角(0.0)开始的,以左下和右上形成对角线,进行颜色分割

    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0f target:self selector:@selector(TimerEvent) userInfo:nil repeats:YES];

}

- (void)TimerEvent {
    self.gradientLayer.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor colorWithRed:arc4random()%255 / 255.0 green:arc4random() %255 / 255.0 blue:arc4random() %255 / 255.0 alpha:1.0].CGColor,(id)[UIColor colorWithRed:arc4random()%255 / 255.0 green:arc4random() %255 / 255.0 blue:arc4random() %255 / 255.0 alpha:1.0].CGColor];

    self.gradientLayer.locations = @[@(0.0f),@(0.5f),@(1.0f)];
}
@end