swift - layer - 渐变色 - CAGradientLayer
知道控件的frame ,创建控件时候直接加上 渐变色
// 创建背景渐变色button(通用于View or Controller底部按钮),bounds计算后传入
static func createGradientButton(font: UIFont = UIFont.systemFont(ofSize: 14), textColor: UIColor = UIColor.white, titleStr: String? = nil,bounds:CGRect) -> UIbutton {
let btn = UIButton(type: .custom)
btn.translatesAutoresizingMaskIntoConstraints = false
btn.setTitle(titleStr, for: .normal)
btn.titleLabel?.font = font
btn.setTitleColor(textColor, for: .normal)
btn.backgroundColor = UIColor.clear
let caGradientLayer:CAGradientLayer = CAGradientLayer()
caGradientLayer.colors = [UIColor(hexString: "#E0AD7D").cgColor,UIColor(hexString: "#FFE8C9").cgColor]
caGradientLayer.locations = [0, 1]
caGradientLayer.startPoint = CGPoint(x: 0, y: 1)
caGradientLayer.endPoint = CGPoint(x: 0.8, y: 1)
caGradientLayer.frame = bounds
btn.layer.insertSublayer(caGradientLayer, at: 0)
return btn
}
2. 不知道 frame
1。创建 渐变色
/// 渐变色:默认从上到下
private var gradientLayer: CAGradientLayer = {
let g = CAGradientLayer()
g.colors = [UIColor.init(hexColor: "DBB479").cgColor,
UIColor.init(hexColor: "F7E1B3").cgColor]
//改为从左到右 的渐变
g.startPoint = CGPoint(x: 0, y: 0)
g.endPoint = CGPoint(x: 1, y: 0)
return g
}()
2.给指定view 添加渐变色
/// 荣誉背景图
private lazy var credibilityBgView : UIView = {
let v = UIView()
v.layer.addSublayer(self.gradientLayer)
v.translatesAutoresizingMaskIntoConstraints = false
v.layer.cornerRadius = 5
v.layer.masksToBounds = true
v.isUserInteractionEnabled = true
v.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(clcikCredibilityBgView)))
return v
}()
3. 在自定义的view中 设置 渐变色frame:draw
override func draw(_ rect: CGRect) {
super.draw(rect)
gradientLayer.frame = credibilityBgView.bounds
}
4.如果在控制器里面,viewDidLayoutSubviews
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
nextBtnAddLayer()
}
/// 下一步按钮添加渐变色
func nextBtnAddLayer(){
let gradient = CAGradientLayer()
gradient.colors = [UIColor.init(hexString: "#FD904B").cgColor,
UIColor.init(hexString: "#FFA64D").cgColor ]
//改为从左到右 的渐变
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 0)
nextBtn.layer.insertSublayer(gradient, at: 0)
gradient.frame = nextBtn.bounds
}
注意 直接用addSubLayer 会遮盖住 子控件, 使用insertSublayer 不会有问题

上面 是同一个渐变色的 colors 更换,
//渐变色
private lazy var caGradientLayer : CAGradientLayer = {
let caGradientLayer:CAGradientLayer = CAGradientLayer()
caGradientLayer.colors = []
caGradientLayer.locations = [0, 1]
caGradientLayer.startPoint = CGPoint(x: 0, y: 1)
caGradientLayer.endPoint = CGPoint(x: 0.8, y: 1)
return caGradientLayer
}() /// 渐变色颜色
private lazy var cgColors: (normal: [CGColor] , select: [CGColor] ) = ([] , []) /// 渐变色 更改 颜色
/// - Parameters:
/// - basicAnimationKeyPath: 动画对应的唯一标示
/// - animationKey: 渐变色 添加的 动画 唯一标示
/// - toChangeColors: 改变的颜色数组
/// - duration: 动画时间
private func addAnimationForCaGradientLayer(basicAnimationKeyPath:String,
animationKey:String,
toChangeColors:[CGColor],
durationTime:CFTimeInterval = 0.05){
//添加渐变动画
let colorChangeAnimation = CABasicAnimation(keyPath: basicAnimationKeyPath)
colorChangeAnimation.delegate = self
colorChangeAnimation.duration = durationTime
colorChangeAnimation.toValue = toChangeColors
colorChangeAnimation.fillMode = CAMediaTimingFillMode .forwards
colorChangeAnimation.isRemovedOnCompletion = false
caGradientLayer.add(colorChangeAnimation, forKey: animationKey)
} 开始定时器是
self.addAnimationForCaGradientLayer(basicAnimationKeyPath: "colorSelected", animationKey: "colorChangeToSelected", toChangeColors: self.cgColors.select) 然后倒计时结束的时候
self.setTitle("重新发送", for: .normal)
self.addAnimationForCaGradientLayer(basicAnimationKeyPath: "colorNormal", animationKey: "colorChangeToNormal", toChangeColors: self.cgColors.normal)
swift - layer - 渐变色 - CAGradientLayer的更多相关文章
- OCiOS开发:CAGradientLayer 渐变色
OCiOS开发:CAGradientLayer 渐变色 CAGradientLayer 简介 CAGradientLayer是CALayer图层类的子类,用于处理渐变色的层结构. CAGradient ...
- Swift - LineChart绘制折线图
LineChart,就使用Core Graphics和QuartzCore框架中的CAShapeLayer绘制.这样执行效率明显比堆砌UIView的方法效率高--占用资源少,执行快. 看看CALaye ...
- swift:打造你自己的折线图
看到苹果Health里的折线图了吗.我们就是要打造一个这样的折线图.没看过的请看下图. 我们的主题在于折线图本身.其他的包括步数.日平均值等描述类的内容这里就不涉及了. 首先观察,这个图种包含些什么组 ...
- iOS—Mask属性的使用
Mask属性介绍 Mask平时用的最多的是masksToBounds 吧. 其实除此以外Mask使用场景很多,看完之后你会发现好真是好用的不要不要的... 先来了解下Mask属性到底是什么? Mask ...
- iOS 开发技巧-制作环形进度条
有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现. 先看一下这篇博客,博客地址:ht ...
- iOS一分钟学会环形进度条
有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现.先看一下这篇博客,博客地址:htt ...
- iOS圆弧渐变进度条的实现
由于项目需要一个环形渐变进度条显示课程,这方便网上的确有很多相关资料但是,都是比较零散的而且,大多数只是放一堆代码就算完了.这里我想详细写一篇我自己实现这个进度条的过程. 实现一个圆弧进度条主要分为三 ...
- 在iOS 4中创建一个LDGradientView样式的渐变视图
本教程将演示如何在 Swift 4 中创建一个多功能的.@IBDesignable 样式的渐变视图类.你可以将 CAGradientView 放到 storyboard 中,并在设计时预览,或者以编程 ...
- 渐变UI
1.h #import <UIKit/UIKit.h> @interface UIView (Gradient) /* The array of CGColorRef objects de ...
随机推荐
- 在执行bat脚本的时候打印日志
- jquery接触初级-----juqery 动画函数
1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...
- 【371】Twitter 分类相关
Bag-of-words model:就是将句子打散成单词的集合. N-gram model:同上,只是按照 n 进行顺序组合. 参考:机器学习实战教程(四):朴素贝叶斯基础篇之言论过滤器 留言板侮辱 ...
- JavaScript 从定义到执行,你应该知道的那些事
JavaScript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.执行环境.全局对象.变量对象.活动对象.作用域和作用域链等 ...
- 深入jUI(DWZ)
-----------------------------------------------------------------------------主页面index.html <html& ...
- week06 09 NodeJS Server as a RPCclient - jayson
nodeserver端的rpcclient 来调用后端backendserver端定义的add等方法 2个server连通 Make NodeJs as a client - Npm jayson 用 ...
- 吴裕雄 python神经网络 手写数字图片识别(5)
import kerasimport matplotlib.pyplot as pltfrom keras.models import Sequentialfrom keras.layers impo ...
- Java8 parallelStream与迭代器Iterator性能
定义一个测试类 public class TestParallelStream { private List<Integer> list; private int size; privat ...
- R语言-直方图
1.直方图 直方图和柱形图的区别:直方图表示频数,柱形图表示数量. 一般直方图的X轴表示取值范围,Y轴表示频数 hist() 函数 > hist(rnorm(1000)) #1000个正态随机数 ...
- 以root用户运行jenkins中shell命令 重要
以centOS系统为例,记录下修改Jenkins以root用户运行的方法. 修改Jenkins配置文件 # 打开配置文件vim /etc/sysconfig/jenkins# 修改$JENKINS_U ...