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 ...
随机推荐
- vscode项目配置 vue-loader-webpack
使用vsCode进行项目配置 一.准备工作 1.下载Visual Studio Code 下载地址 2.打开vscode,根据自己需求下载相应插件,可以提高工作效率. 点击下角选项(我作了红框标记), ...
- Android EventBus3.x 使用详解
♪(^∇^*) 五一假期在家无事,新项目中用的是RxJava2+EventBus感觉还不错,趁这闲暇总结下EventBus. 一.概要简述 EventBus是一个基于观察者模式的Android事件发布 ...
- python 小整数池 和intern 【整理】
小整数对象池 (在python内置了) 整数在程序中的使用非常广泛,Python为了优化速度,使用了小整数对象池,避免为整数频繁申请和销毁内存空间. Python对小整数的定义是[-5,257]这些整 ...
- 【deep learning】斯坦福CS231n—深度学习与计算机视觉(资料汇总)
官网 链接:CS231n: Convolutional Neural Networks for Visual Recognition Notes: 链接:http://cs231n.github.io ...
- hibernate中的sql 1+n 问题
( 产生的原因:当一对多或多对多的映射关系下,当在一方添加或修改数据时,一方集合属性中的多方都要发生变化;先select语句,再update语句.当一方集合属性中的数据有很多时,对应的update语句 ...
- Android Monkey: “No activities found to run, monkey aborted”错误原因
用monkey测试app时,输入命令adb shell monkey -p com.example.test -v -500 发现报错, 错误输入: :Monkey: seed=13 count=5 ...
- Repeater - 重复器
Repeater - 重复器,用来展示泛型集合中的数据 五大模板:1.HeaderTemplate - 头模板,加载时会在开始执行一次2.FooterTemplate - 脚模板,加载时会在最后执行一 ...
- akka共享内存
Akka共享内存 Akka中的共享内存是基于Actor模型的,Actor模型提倡的是:通过通讯来实现共享内存,而不是用共享内存来实现通讯,这点是跟Java解决共享内存最大的区别,举个例子: 在Java ...
- springBoot入门文章
https://www.javaworld.com/article/2078034/spring-framework/spring-framework-mastering-spring-mvc.htm ...
- 关于log4j:WARN No appenders could be found for logger (org.apache.hadoop.metrics2.lib.MutableMetricsFactory).的问题
解决办法(非长久之计,折中) 将该方法插入到main函数中,可以自行打印日志信息了 BasicConfigurator.configure(); //自动快速地使用缺省Log4j环境.原文链接:htt ...