Swift4.0 登录页面渐变色
2017-11-01 本文已影响222人
Codepgq
本例子参考Pastel,但是Pastel不支持4.0
最终效果图：
最终效果
一、UI就是Storyboard拖拖拖搞定了，其它的设置也很简单
textfield输入框，背景设置一点不透明度就好了
textfiled
button登录按钮
@IBOutlet var loginBtn: UIButton!{
didSet{
loginBtn.layer.borderColor = UIColor.white.withAlphaComponent(0.12).cgColor
loginBtn.layer.borderWidth = 1.0
loginBtn.layer.cornerRadius = 4
}
}
二、创建一个类，去实现这个效果
- 2.1 创建一个类，集成UIView
- 2.2 定义一些属性
var gradient = CAGradientLayer()
var animatiomDuration = 2.0
var startPoint : CGPoint = PQPastelPosition.topLeft.rawValue
var endPoint : CGPoint = PQPastelPosition.bottomRight.rawValue
private var currentGradient : Int = 0
private var colors : [UIColor] = [#colorLiteral(red: 0.5843137503, green: 0.8235294223, blue: 0.4196078479, alpha: 1),#colorLiteral(red: 0.9686274529, green: 0.78039217, blue: 0.3450980484, alpha: 1),#colorLiteral(red: 0.9568627477, green: 0.6588235497, blue: 0.5450980663, alpha: 1),#colorLiteral(red: 0.9098039269, green: 0.4784313738, blue: 0.6431372762, alpha: 1),#colorLiteral(red: 0.4745098054, green: 0.8392156959, blue: 0.9764705896, alpha: 1),#colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1)]
- 2.3 定义一些需要用到的枚举
- 位置枚举
extension CGPoint : ExpressibleByStringLiteral{
public init(stringLiteral value: String) {
let point = CGPointFromString(value)
self.init(x:point.x ,y:point.y)
}
public init(extendedGraphemeClusterLiteral value: String) {
let point = CGPointFromString(value)
self.init(x:point.x ,y:point.y)
}
public init(unicodeScalarLiteral value: String) {
let point = CGPointFromString(value)
self.init(x:point.x ,y:point.y)
}
}
enum PQPastelPosition : CGPoint {
case bottomLeft = "{1,0}"
case bottomCenter = "{1,0.5}"
case bottomRight = "{1,1}"
case centerLeft = "{0.5,0}"
case centerCenter = "{0.5,0.5}"
case centerRight = "{0.5,1}"
case topLeft = "{0,0}"
case topCenter = "{0,0.5}"
case topRight = "{0,1}"
}
- 颜色枚举 这里是参考的Pastel
@objc public enum PQPastelDefaultColor: Int {
case warmFlame
case nightFade
case springWarmth
case juicyPeach
case youngPassion
case ladyLips
case sunnyMorning
case rainyAshville
case frozenDreams
case winterNeva
func colors() -> [UIColor] {
switch self {
case .warmFlame:
return [#colorLiteral(red: 1, green: 0.6039215686, blue: 0.6196078431, alpha: 1), #colorLiteral(red: 0.9803921569, green: 0.8156862745, blue: 0.768627451, alpha: 1)]
case .nightFade:
return [#colorLiteral(red: 0.631372549, green: 0.5490196078, blue: 0.8196078431, alpha: 1), #colorLiteral(red: 0.9843137255, green: 0.7607843137, blue: 0.9215686275, alpha: 1)]
case .springWarmth:
return [#colorLiteral(red: 0.9803921569, green: 0.8156862745, blue: 0.768627451, alpha: 1), #colorLiteral(red: 1, green: 0.8196078431, blue: 1, alpha: 1)]
case .juicyPeach:
return [#colorLiteral(red: 1, green: 0.9254901961, blue: 0.8235294118, alpha: 1), #colorLiteral(red: 0.9882352941, green: 0.7137254902, blue: 0.6235294118, alpha: 1)]
case .youngPassion:
return [#colorLiteral(red: 1, green: 0.5058823529, blue: 0.4666666667, alpha: 1), #colorLiteral(red: 1, green: 0.5254901961, blue: 0.4784313725, alpha: 1), #colorLiteral(red: 1, green: 0.5490196078, blue: 0.4980392157, alpha: 1), #colorLiteral(red: 0.9764705882, green: 0.568627451, blue: 0.5215686275, alpha: 1), #colorLiteral(red: 0.8117647059, green: 0.3333333333, blue: 0.4235294118, alpha: 1), #colorLiteral(red: 0.6941176471, green: 0.1647058824, blue: 0.3568627451, alpha: 1)]
case .ladyLips:
return [#colorLiteral(red: 1, green: 0.6039215686, blue: 0.6196078431, alpha: 1), #colorLiteral(red: 0.9960784314, green: 0.8117647059, blue: 0.937254902, alpha: 1), #colorLiteral(red: 0.9960784314, green: 0.8117647059, blue: 0.937254902, alpha: 1)]
case .sunnyMorning:
return [#colorLiteral(red: 0.9647058824, green: 0.8274509804, blue: 0.3960784314, alpha: 1), #colorLiteral(red: 0.9921568627, green: 0.6274509804, blue: 0.5215686275, alpha: 1)]
case .rainyAshville:
return [#colorLiteral(red: 0.9843137255, green: 0.7607843137, blue: 0.9215686275, alpha: 1), #colorLiteral(red: 0.6509803922, green: 0.7568627451, blue: 0.9333333333, alpha: 1)]
case .frozenDreams:
return [#colorLiteral(red: 0.9921568627, green: 0.7960784314, blue: 0.9450980392, alpha: 1), #colorLiteral(red: 0.9921568627, green: 0.7960784314, blue: 0.9450980392, alpha: 1), #colorLiteral(red: 0.9019607843, green: 0.8705882353, blue: 0.9137254902, alpha: 1)]
case .winterNeva:
return [#colorLiteral(red: 0.631372549, green: 0.768627451, blue: 0.9921568627, alpha: 1), #colorLiteral(red: 0.7607843137, green: 0.9137254902, blue: 0.9843137255, alpha: 1)]
}
}
}
- 2.4 向外提供可调用方法
public func setColors(_ colors : [UIColor]) {
guard colors.count > 0 else {
return
}
self.colors = colors
}
public func appendColor(_ color : UIColor){
self.colors.append(color)
}
- 2.5 最最最重要的方法来了
动画处理- 先从数组中取出两个颜色，为gradient赋值，也就是最初的颜色
- 然后在创建动画
CABasicAnimation设置toValue为当前颜色数组下标+1
比如：颜色数组是[红、绿、蓝、紫] 那么默认颜色就是：红 渐变 绿， 而动画的toValue就是：绿 渐变 蓝 - 然后在动画结束的时候再次开启动画，颜色在往后位移一次，周而复始，就可以完成这个效果了
初始化gradient
/// 初始化
private func setup(){
gradient.frame = bounds
gradient.colors = currentGreadientColor()
gradient.startPoint = startPoint
gradient.endPoint = endPoint
gradient.drawsAsynchronously = true
layer.insertSublayer(gradient, at: 0)
}
设置动画
private func animateGradient(){
currentGradient += 1
let animation = CABasicAnimation(keyPath: Animation.keyPath)
animation.duration = animatiomDuration
animation.toValue = currentGreadientColor()
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
animation.delegate = self
gradient.add(animation, forKey: Animation.key)
}
要想循环播放并且颜色位移，就要监听动画结束的时候再做处理
extension PQPastelView : CAAnimationDelegate{
public func animationDidStop(_ anim: CAAnimation, finished flag: Bool){
if flag {
gradient.colors = currentGreadientColor()
animateGradient()
}
}
}
三、使用
let pastel = PQPastelView(frame: view.bounds)
// pastel.setColors(PQPastelDefaultColor.frozenDreams.colors())
// pastel.startPoint = PQPastelPosition.topRight.rawValue
// pastel.endPoint = PQPastelPosition.bottomLeft.rawValue
//
// pastel.animatiomDuration = 3.0
//
// pastel.appendColor(#colorLiteral(red: 1, green: 0.9207347908, blue: 0, alpha: 1))
//
// pastel.startAnimation()
view.insertSubview(pastel, at: 0)
至此功能就实现了，把 Demo地址 给给为老爷奉上，其余细节部分在Demo中。
本例子参考Pastel
