很長時間沒有寫文章了笼裳，人變懶惰了须尚。
很早之前看見一個公式：每天進步一點點，一年下來侍咱，你會發(fā)現(xiàn)進步很多耐床。每天不進步，一年下來就會倒退很多楔脯×煤洌“逆水行舟，不進則退”昧廷，說的就是這個道理堪嫂。
好了，閑話不多說木柬。 今天的主角是
CAGradientLayer皆串。我將這篇文章歸類為iOS Animation，因為在后續(xù)的教程中眉枕，我將會講解如何利用CAGradientLayer創(chuàng)建動畫`后續(xù)會有系列教程恶复，敬請期待。
一速挑、開始
文章中使用的開發(fā)環(huán)境是xcode9.1 谤牡， 用的是swift語言。關(guān)于CAGradientLayer是什么姥宝，這里就不做過多解釋了翅萤，想要了解的朋友們，可以自己下去看蘋果文檔腊满，或者百度一下套么。 最終效果鍵本文最后面附的圖 完整項目下載地址.
- 1.1 首先我們在viewDidAppear（）方法中創(chuàng)建一個漸變。
let gradient = CAGradientLayer() // 創(chuàng)建一個漸變層
gradient.frame = view.bounds // 設(shè)置frame（全屏顯示）
gradient.startPoint = CGPoint(x: 0, y: 0) // 設(shè)置開始點
gradient.endPoint = CGPoint(x: 1, y: 1) // 設(shè)置結(jié)束點
可能有朋友會有疑問碳蛋，開始點和結(jié)束點為什么是 (0, 0)和(1, 1)呢胚泌？ 別急，看看下圖就知道了疮蹦。
當我們運行代碼后诸迟，發(fā)現(xiàn)什么都沒有。 當然啦，你要設(shè)置漸變色阵苇，首先你得設(shè)置CAGradientLayer的顏色壁公，最重要的一步，你還要把它添加到View的layer上面绅项。下圖是顯示效果
- 1.2 將gradient添加到控制器視圖的layer上
// 設(shè)置漸變色（這里需要傳遞一個color數(shù)組）
gradient.colors = [UIColor(red: 0.0, green: 1.0, blue: 0.752, alpha: 1.0).cgColor,
UIColor(red: 0.949, green: 0.03, blue: 0.913, alpha: 1.0).cgColor]
// 將gradient添加到控制器視圖的layer上
view.layer.addSublayer(gradient)
[圖片上傳失敗...(image-c1eb26-1511180450498)]
看紊册，是不是很漂亮？你也可以設(shè)置你自己喜歡的顏色快耿。
二囊陡、漸變和UILabel結(jié)合
接下來，我們看看掀亥，當漸變和UILabel結(jié)合會是什么樣子的撞反。
按住鍵盤上的control+command 點擊CAGradientLayer，會跳到它的定義搪花。我們發(fā)現(xiàn)CAGradientLayer是繼承CALayer的遏片，CALayer有一個mask屬性，mask屬性撮竿？吮便？？什么鬼幢踏？
CALayer的頭文件關(guān)于mask的說明髓需，mask實際上layer內(nèi)容的一個遮罩，如果我們把mask是透明的房蝉，實際看到的layer是完全透明的僚匆，也就是說只有mask的內(nèi)容不透明的部分和layer疊加的部分才會顯示出來。
為了方便惨驶，我直接在storyBoard上拖了一個UILabel白热，并設(shè)置gradient.mask = label.layer;敛助。 再次運行項目可以看到的單詞“文本”不是以其原始的黑色顯示粗卜，而是在顯示上文中我們設(shè)置的漸變顏色。為了使效果更酷纳击，我們添加了一些動畫续扔，讓其看起來更加有趣。
// UILabel動畫焕数， 需要傳入一個字符串
func animateText(text: String) {
// text的長度大于0才會運行這個動畫
if text.characters.count > 0 {
// startIndex : 第一個字符的位置
// text.index(after: text.startIndex) 給定位置之后的字符位置
// 下面兩句的組合起來完成了本動畫：label的文本從傳入的字符串的第一個字符開始纱昧，每隔0.05秒添加一個字符到label上面，直至結(jié)束堡赔。
label.text = "\(label.text!)\(text.substring(to: text.index(after: text.startIndex)))"
delay(0.05, task: { // delay 是封裝的一個延時方法识脆，后面工程中會給出這部分封裝的代碼。
self.animateText(text: text.substring(from: text.index(after: text.startIndex)))
})
} else {
// 結(jié)束Label動畫，如果要做別的操作灼捂，在這里添加代碼
}
}
關(guān)于上面動畫的說明：每0.05秒添加一個字符到label上离例，直到有字符添加。 它會自己遞歸地調(diào)用悉稠，所以你只需要用全文調(diào)用一次宫蛆，然后讓它自己工作。別忘記了在 viewDidAppear方法中調(diào)用 animateText(text: "需要顯示的內(nèi)容") 這個方法的猛。下面是運行效果：
是不是很酷耀盗？??????。 我們還可以為gradient添加更多的mask卦尊，比如說添加一個按鈕動畫：
func addButtonRing() {
let side: CGFloat = 60.0
let button = CAShapeLayer() // CAShapeLayer 繪制圓環(huán)
button.position = CGPoint(x: label.bounds.width * 0.5 - side/2, y: label.bounds.height * 0.85) // 設(shè)置圓環(huán)的位置
button.strokeColor = UIColor.black.cgColor // 設(shè)置圓環(huán)邊框的顏色
button.fillColor = UIColor.clear.cgColor // 設(shè)置圓環(huán)的填充顏色
button.path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: side, height: side)).cgPath // 設(shè)置路徑
button.lineWidth = 1.0 // 邊框?qū)挾? button.opacity = 0.5 // 透明度
label.layer.addSublayer(button) // 將圓環(huán)添加到label的layer上面
// 縮放動畫
let scale = CABasicAnimation(keyPath: "transform.scale") // 創(chuàng)建縮放動畫
scale.fromValue = 1.0 // 開始值
scale.toValue = 0.67 // 結(jié)束值
scale.duration = 2.0 // 動畫時間
scale.repeatCount = Float.infinity // 重復次數(shù)
scale.autoreverses = true // 逆向運行動畫
button.add(scale, forKey: nil) // 為圓環(huán)添加動畫
}
寫好上面這些代碼后叛拷，我們在哪里調(diào)用呢？ 別急岂却，還記得上面為UILabel添加動畫的那個方法嗎胡诗？（animateText），只需要在else里面調(diào)用這個方法就行了淌友。
func animateText(text: String) {
if text.characters.count > 0 {
...
} else {
// 結(jié)束Label動畫煌恢，如果要做別的操作，在這里添加代碼
// 添加幾個就是幾個圓環(huán)
delay(0.1, task: {self.addButtonRing()})
delay(1.2, task: {self.addButtonRing()}) delay(2.4, task: {self.addButtonRing()})
}
}
現(xiàn)在讓我們來看一下成果吧震庭，見證奇跡的時候到了瑰抵，哇咔咔。
我們還可以為它加一個imageView的遮罩器联，比如像這樣, 最終效果見下圖：
let imageView = UIImageView(image: UIImage(named: "dog3"))
imageView.center.x = label.bounds.width/2
label.addSubview(imageView)
圖片的顏色也發(fā)生了漸變二汛。
