總結內容
1. 掌握UIView顯示層動畫和CALayer內容層動畫區(qū)別
2. 理解Core Animation核心動畫架構
3. CALayer內容層動畫合集
內容層動畫具有和顯示層動畫類似的初級動畫效果秒咐，但除此之外，其利用內容層的一些特殊屬性還可以實現(xiàn)各種高級的效果 比如環(huán)形動畫 , 圓角動畫等蕴纳。
1. UIView 和 CALayer 的區(qū)別（當然他們兩個的區(qū)別遠不止這些 以下是比較突出的區(qū)別）
- UIView 繼承自UIResponder 因此UIView是可以處理響應事件的盆赤，而CALayer繼承自NSObject, 所以它只負責內容的創(chuàng)建 和繪制霉祸。
- UIView負責對內容的管理脐湾， CALayer負責內容的繪制
- UIView中的位置屬性只有frame , bounds , center, 而CALayer除了具備這些屬性之外還有anchorPoint , position
2.Core Animation 核心動畫
Core Animation為IOS核心動畫 它提供了一組豐富的API可以用于制作各種高級動畫。Core Animation來自QuartzCore.framework框架 它具有以下特點
1 . 直接作用于CALayer圖層上捧韵，而非UIView上市咆；
2 . Core Animation的執(zhí)行過程在后臺執(zhí)行，不阻塞主線程再来；
3 . 可以利用CALayer絕大多數數學制作高級動畫效果蒙兰；
下面來看看CoreAnimation 下各種常用動畫類的繼承關系 如下
截屏2020-08-22 上午11.50.11.png
3.CALayer 層動畫使用實例 我把代碼也貼出來了自測了一下是沒多大毛病的；
var loginBtn : UIButton?
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.white
// Do any additional setup after loading the view.
/**
Core Animation CABasicAnimation 核心動畫
*/
loginBtn = UIButton(frame: CGRect(x: 20, y: 230, width: self.view.frame.width-20*2, height: 50))
loginBtn?.backgroundColor = UIColor(red: 50/255.0, green: 185/255.0, blue: 170/255, alpha: 1.0)
loginBtn?.setTitle("登陸", for: .normal);
self.view.addSubview(loginBtn!)
}
1. 移動動畫
let animation:CABasicAnimation = CABasicAnimation()
animation.keyPath = "position"
if let btn = loginBtn {
let positionX:CGFloat = btn.frame.origin.x + 0.5 * btn.frame.size.width;
let positionY:CGFloat = btn.frame.origin.y + 0.5 * btn.frame.size.height + 100;
animation.toValue = NSValue(cgPoint: CGPoint(x: positionX, y: positionY))
animation.duration = 2.0
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
}
2. 縮放動畫
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "transform.scale.x"
animation.fromValue = 1.0
animation.toValue = 0.8
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
3. 旋轉動畫
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "transform.rotation"
// animation.fromValue = 1.0
animation.toValue = 3.14/2
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
4. 位移動畫
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "transform.translation.y"
// animation.fromValue = 1.0
animation.toValue = 100
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
5. 圓角動畫
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "cornerRadius"
// animation.fromValue = 1.0
animation.toValue = 15
animation.duration = 2
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
6. 邊框動畫
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "borderWidth"
// animation.fromValue = 1.0
animation.toValue = 10
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
7. 顏色漸變動畫
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "backgroundColor"
animation.fromValue = UIColor.green.cgColor
animation.toValue = UIColor.red.cgColor
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
8.淡入淡出動畫
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "opacity"
animation.fromValue = UIColor.green.cgColor
animation.toValue = 1.0
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
9. 陰影漸變動畫
loginBtn?.layer.shadowColor = UIColor.red.cgColor
loginBtn?.layer.shadowOpacity = 0.5
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "shadowOffset"
animation.toValue = NSValue(cgSize:CGSize(width: 10, height: 10))
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
