颜色线性渐变-CAGradientLayer

我们先来看一下效果图吧:

其实,就是一个颜色的线性渐变,使用CAGradientLayer很容易就能实现。由于代码很简单,就不做过多讲解了,直接看代码吧。

 1 import UIKit
 2
 3 class ViewController: UIViewController {
 4
 5     override func viewDidLoad() {
 6         super.viewDidLoad()
 7         setupBackgroundLayer()
 8     }
 9
10     private func setupBackgroundLayer(){
11         // 线性渐变图层
12         let layer:CAGradientLayer = CAGradientLayer()
13
14         // layer是通过bounds和position来指定位置的
15         layer.bounds = view.bounds
16         layer.position = view.center
17
18         // 设置背景颜色
19         // layer.backgroundColor = UIColor.red.cgColor
20         // 设置渐变颜色数组
21         let color1 = UIColor.red.cgColor
22         let color2 = UIColor.blue.cgColor
23         let color3 = UIColor.orange.cgColor
24         layer.colors = [color1,color2,color3]
25
26         // 设置颜色的位置数组
27         layer.locations = [0, 0.6,1.0]
28
29         // 将图层插入到最底部
30         view.layer.insertSublayer(layer, at: 0)
31     }
32 }
时间: 2024-10-19 03:10:45

颜色线性渐变-CAGradientLayer的相关文章

CSS3中颜色线性渐变实战

css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .test{ background:linear-gradient(red, blue); } 上述代码的效果如图所示. 最简单的线性渐变效果 如果要在一些旧版本的浏览器(除IE)下可以正常显示如图5.9的效果,则需要添加兼容代码: CSS Code复制内容到剪贴板 .test { background:

进度条-线性渐变

/* 进度条 */div.progress { width: 600px; margin: 10px auto; height: 20px; line-height: 20px; font-size: 14px; background: #F7F7F7; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);}div.progress div.bar { float: left; width: 60%; backgr

再说CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐

CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐

【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变

颜色插值指的是给出两个 RGB 颜色值,两个颜色之间的值通过插值函数计算得到.线性渐变是添加到 SVG 图形上的过滤器,只需给出两端的颜色值即可. 1. 颜色插值 在[高级 - 第 5.0 章]里已经提到了颜色插值,在这里做一个例子.先定义颜色插值函数如下, var a = d3.rgb(255,0,0); //红色 var b = d3.rgb(0,255,0); //绿色 var compute = d3.interpolate(a,b); 如此一来,compute 可当做函数使用,参数的范

css3的背景颜色渐变@线性渐变

背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); opera浏览器    background: -o-linear-gradient(position/deg,startColor,endColor); safari和chrome浏览器    background: -webkit-linear-gradient(position/deg,startCo

Android获得线性渐变某点的颜色

安卓官方确实提供了好多非常强大的工具给我们了,例如我们最近经常在shape中加入gradient(渐变),像我的项目中用的是线性渐变, [html] view plain copy <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners andr

iOS两种颜色的线性渐变--DDGBannerScrollView

两种颜色的线性渐变 ! 我们都知道,一个像素点有三原色加上透明度组成,也就是所说的RGBA(红,绿,蓝,透明度),改变其中的任意一个值,给我们呈现的颜色就不一样. 比如,一个点的R1为10,另一个颜色的R2为30,那么R1->R2的线性变化的差值就是20 ,如果滑块的偏移量为100,那么渐变系数为0.2,那么R2 = 10 + 100 * 0.2, 当我们在拉滑块的过程中,R在颜色变化中就是线性的,同理剩余颜色也是渐变的.如上图中的中间View,就是在两个颜色之间过度. 这个关于颜色的扩展,我已

CSS3 线性渐变(linear-gradient) 兼容IE8,IE9

一.线性渐变在 Mozilla 下的应用     语法: 1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下.left 是从左到右,如果定义成 left top,那就是从左上角到右下角.第二个和第三个参数分别是起点颜色和终点颜色.你还可以在它们之间插入更多的参数,表示多种颜色的