總結(jié)內(nèi)容

1. 掌握UIView顯示層動畫和CALayer內(nèi)容層動畫區(qū)別

2. 理解Core Animation核心動畫架構(gòu)

3. CALayer內(nèi)容層動畫合集

內(nèi)容層動畫具有和顯示層動畫類似的初級動畫效果，但除此之外，其利用內(nèi)容層的一些特殊屬性還可以實現(xiàn)各種高級的效果 比如環(huán)形動畫 , 圓角動畫等。

1. UIView 和 CALayer 的區(qū)別（當(dāng)然他們兩個的區(qū)別遠不止這些 以下是比較突出的區(qū)別）

- UIView 繼承自UIResponder 因此UIView是可以處理響應(yīng)事件的，而CALayer繼承自NSObject, 所以它只負責(zé)內(nèi)容的創(chuàng)建 和繪制。

- UIView負責(zé)對內(nèi)容的管理， CALayer負責(zé)內(nèi)容的繪制

- 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絕大多數(shù)數(shù)學(xué)制作高級動畫效果；

下面來看看CoreAnimation 下各種常用動畫類的繼承關(guān)系 如下

截屏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. 旋轉(zhuǎn)動畫

                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)

以上例子是CABasicAnimation的基本用法比較簡單 希望對大家有用！下次有時間在給大家總結(jié)一下CoreAnimation:CAKeyframeAnimation【關(guān)鍵幀動畫】 ， CAAnimation Croup 動畫的使用！有問題的地方望大家指正。在此完結(jié)謝謝！