文档章节

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

Youth_关旋
 Youth_关旋
发布于 2016/06/01 15:34
字数 699
阅读 11
收藏 1

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

iOS Bear 1年前 (2015-02-23) 27453浏览 2评论

看了极客学院的视频之后写的一篇博客,觉得不错,还是作为笔记使用。
简单介绍一下CAGradientLayer吧。
Gradient:本身就是梯度的意思,所以在这里就是作为渐变色来理解
1,CAGradientLayer用于处理渐变色的层结构
2,CAGradientLayer的渐变色可以做隐式动画
3,大部分情况下,CAGradientLayer时和CAShapeLayer配合使用的。关于CAShapeLayer可以看我的这篇博客
基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【原创】
4,CAGradientLayer可以用作PNG的遮罩效果

关于CAGradientLayer的坐标系统
为什么要提到CAGradientLayer的坐标系统呢?因为渐变色的作用范围,变化梯度的方向,颜色变换的作用点都和CAGradientLayer的坐标系统有关
屏幕快照 2015-02-23 上午10.06.18

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

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"

 

@interface ViewController ()

 

@property (strong, nonatomic) CAGradientLayer *gradientLayer;

@property (strong, nonatomic) NSTimer *timer;

 

@end

 

@implementation ViewController

 

- (void)viewDidLoad {

    [super viewDidLoad];

     

    //初始化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 = @[(__bridge id)[UIColor clearColor].CGColor,

                                  (__bridge id)[UIColor purpleColor].CGColor];

     

    //设定颜色分割点

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

     

    //定时器

    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0f

                                                  target:self

                                                selector:@selector(TimerEvent)

                                                userInfo:nil

                                                 repeats:YES];

}

 

- (void)TimerEvent

{

    //定时改变颜色

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

                                  (__bridge id)[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的质量不高,有明显失真。如果在真机或者模拟器上运行的话效果很好的,也很流畅。

 

原创文章,转载请署名出处。严禁用于商业用途。否则将追究法律责任!!!

本文永久地址:http://blog.it985.com/7986.html

 

本文转载自:http://blog.csdn.net/ch_soft/article/details/7534542

Youth_关旋
粉丝 2
博文 70
码字总数 23376
作品 0
枣庄
私信 提问
UIButton 背景色渐变动画

UIButton 背景色渐变动画 项目有个需求需要UIButton上的背景色是渐变动画的效果,如下。 实现 CAGradientLayer 用于实现渐变效果,CABasicAnimation用于对Layer做动画 源码:https://github.c...

qin_shi
2018/04/17
0
0
CAGradientLayer - 渐变颜色(iOS)

CAGradientLayer继承自CALayer, 是 Core Animation 中的一个, 主要功能是用来时间渐变颜色图层. 效果如下所示: 代码实现: 这样的功能, 实现起来还是比较简单的, 苹果给我们全部都封装好了, 只...

hell03W
2016/07/27
59
0
swift开发中使用CAGradientLayer渲染导航栏背景色渐变

昨天UI同事给的导航栏颜色渐变背景图,只有在plus上图片出现问题,其他的都是正常显示,总是找不到问题所在,后来问了同事后,说图片是用插件强行在2x图片下切得3x图片,在plus上图片出现问题...

媛美一生
2016/11/03
128
0
实现文字的颜色渐变效果  CAGradientLayer(渐变色图层)

本次文章,主要讲述的是图层中的mask属性,利用它,可以做出文字渐变效果! 思路: 1. 创建UILabel. --- > label只是用来做文字裁剪;必须要把label添加到view上,如果不添加到view上,label...

如若初见
2016/05/04
890
0
iOS 做一个圆形渐变圆环

代码主要用到: CALayer+UIBezierPath+CAShapeLayer+CAGradientLayer+CABasicAnimation 1.创建一个图层 效果如图: 2.绘制一个路径,再生成一个背景圆环加到view上 效果如图: 3.利用CAGradientL...

TouchMing
2018/01/15
967
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 年迈渔夫遭黑帮袭抢

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享Elvis Presley的单曲《White Christmas》: 《White Christmas》- Elvis Presley 手机党少年们想听歌,请使劲...

小小编辑
今天
1K
16
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
12
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部