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 ...
随机推荐
- windows下面的java项目打成jar放到XShell终端上面进行远程调试
前言: java项目打成jar放到linux上面运行,但是linux上面没有eclipse不能进行debug,所以要在windows的eclipse中进行远程调试. 需要注意的是!!!-->在e ...
- printf 输出% 和 \
在小白第一章后面1.5.3中有仨题: 1 试着把%d中的两个字符(百分号和小写字母d)输出到屏幕. 2 试着把\n中的两个字符(反斜线和小写字母n)输出到屏幕. 3 像 1.2这样需要“特殊方法”才能 ...
- Mongodb集群节点故障恢复场景分析(转)
一个适当配置的Mongodb分片集群是没有单点故障.本文描述了分片集群中存在的几种不同的潜在的节点故障场景,以及Mongodb对这些节点故障是怎么处理的.1.Mongos节点宕机一个Mongos进程应 ...
- 解析swf文件头,获取flash的原始尺寸
要想解析swf文件头,首先要弄清楚的当然是swf文件格式规范.规范中对swf文件格式作了详细的说明.关于swf文件头,它是由以下几个部分组成:+-------+---+--------+------- ...
- 一个关于EasyUI超恶心的BUG。。。Cannot read property 'options' of undefined
控制台Console抛出的异常: jquery.easyui.min.js:9148 Uncaught TypeError: Cannot read property 'options' of und ...
- Chrome 不能访问tensorboard解决
Chrome 不能访问tensorboard解决 Run: Cmd Result: C:\Users\think>tensorboard --logdir=C:\Users\think\sour ...
- ORA-01704: 字符串文字太长 oracle
.net连接oracle时,当流从文件读出来更新数据库时,会报"ORA-01704: 字符串文字太长"这样的错误. 原因:sql语句拼接而成. 解决:采用参数方法传值. strin ...
- vue组件知识点
1.组件的定义 const component = { props: { //外部父组件约束子组件的 里面不要修改 可以通过触发事件来修改 active: Boolean, propOne: Stri ...
- spring 手册
https://www.tutorialspoint.com/spring/spring_architecture.htm
- 04_web基础(五)之cookie与session
29.Http协议无记忆带来的问题 什么是会话:可简单理解为:用户开一个浏览器,访问某一个web站点,在这个站点点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一次会话. 在一 ...