通过CAGradientLayer制作渐变色效果【原创】

通过CAGradientLayer制作渐变色效果【原创】

 

看了极客学院的视频之后写的一篇博客，觉得不错，还是作为笔记使用。

简单介绍一下CAGradientLayer吧。

Gradient：本身就是梯度的意思，所以在这里就是作为渐变色来理解

1，CAGradientLayer用于处理渐变色的层结构

2，CAGradientLayer的渐变色可以做隐式动画

3，大部分情况下，CAGradientLayer时和CAShapeLayer配合使用的。关于CAShapeLayer可以看我的这篇博客

基于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的比例来计算的

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

#import "ViewController.h"

 

@interfaceViewController ()

 

@property(strong, nonatomic) CAGradientLayer *gradientLayer;

@property(strong, nonatomic)NSTimer *timer;

 

@end

 

@implementationViewController

 

- (void)viewDidLoad {

    [superviewDidLoad];

     

    //初始化imageView

    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];

    imageView.frame = CGRectMake(0, 0,self.view.bounds.size.width, 200);

    imageView.center = self.view.center;

    [self.view addSubview:imageView];

     

    //初始化渐变层

    self.gradientLayer = [CAGradientLayer layer];

    self.gradientLayer.frame = imageView.bounds;

    [imageView.layer addSublayer:self.gradientLayer];

     

    //设置渐变颜色方向

    self.gradientLayer.startPoint = CGPointMake(0, 0);

    self.gradientLayer.endPoint = CGPointMake(0, 1);

     

    //设定颜色组

    self.gradientLayer.colors = @[(__bridgeid)[UIColor clearColor].CGColor,

                                  (__bridgeid)[UIColor purpleColor].CGColor];

     

    //设定颜色分割点

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

     

    //定时器

    self.timer = [NSTimerscheduledTimerWithTimeInterval:2.0f

                                                  target:self

                                                selector:@selector(TimerEvent)

                                                userInfo:nil

                                                 repeats:YES];

}

 

- (void)TimerEvent

{

    //定时改变颜色

    self.gradientLayer.colors = @[(__bridgeid)[UIColor clearColor].CGColor,

                                  (__bridgeid)[UIColor colorWithRed:arc4random() % 255 / 255.0

                                                               green:arc4random() % 255 / 255.0

                                                                blue:arc4random() % 255 / 255.0

                                                               alpha:1.0].CGColor];

     

    //定时改变分割点

    self.gradientLayer.locations = @[@(arc4random() % 10 / 10.0f), @(1.0f)];

}

 

@end

看下效果图

gif的质量不高，有明显失真。如果在真机或者模拟器上运行的话效果很好的，也很流畅。

奉上demo