本例子參考Pastel,但是Pastel不支持4.0
最終效果圖：
最終效果
一杭措、UI就是Storyboard拖拖拖搞定了帮孔，其它的設(shè)置也很簡單
textfield輸入框祭务，背景設(shè)置一點不透明度就好了
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
}
}
二中狂、創(chuàng)建一個類屁柏，去實現(xiàn)這個效果
- 2.1 創(chuàng)建一個類啦膜，集成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 向外提供可調(diào)用方法
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 最最最重要的方法來了
動畫處理- 先從數(shù)組中取出兩個顏色有送，為gradient賦值，也就是最初的顏色
- 然后在創(chuàng)建動畫
CABasicAnimation設(shè)置toValue為當(dāng)前顏色數(shù)組下標(biāo)+1
比如：顏色數(shù)組是[紅僧家、綠雀摘、藍(lán)、紫] 那么默認(rèn)顏色就是：紅 漸變 綠八拱， 而動畫的toValue就是：綠 漸變 藍(lán) - 然后在動畫結(jié)束的時候再次開啟動畫阵赠，顏色在往后位移一次，周而復(fù)始乘粒，就可以完成這個效果了
初始化gradient
/// 初始化
private func setup(){
gradient.frame = bounds
gradient.colors = currentGreadientColor()
gradient.startPoint = startPoint
gradient.endPoint = endPoint
gradient.drawsAsynchronously = true
layer.insertSublayer(gradient, at: 0)
}
設(shè)置動畫
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)
}
要想循環(huán)播放并且顏色位移豌注，就要監(jiān)聽動畫結(jié)束的時候再做處理
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)
至此功能就實現(xiàn)了灯萍，把 Demo地址 給給為老爺奉上轧铁，其余細(xì)節(jié)部分在Demo中。
本例子參考Pastel
