iOS動畫系列之五：基礎動畫之縮放篇&旋轉篇Swift+OC

非典型技術宅發表於2017-09-05
iOS動畫Swift

這一篇主要介紹基礎動畫之縮放和旋轉。這些基本操作分享完之後，我想想可以找個稍微複雜一點點的動畫做做啦。

這篇繼續基礎篇，分享一下縮放和旋轉。因為整體思路和平移基本上沒有變化，加上原始碼裡面也有OC版本的。所以我們們這次以swift為例來寫一寫。

為了能夠更明顯的看到效果，所以加了幾個UILabel用來標示。實際開發中最好不要用我這種方法，就是偷個懶。用frame的時候還需要考慮螢幕適配問題，就有點麻煩了。

1. 思路和最終成果

最終的成果：

BasicAnimation.gif
BasicAnimation.gif

思維導圖：

基礎動畫.png
基礎動畫.png

2. 抽取公共方法

因為需要頻繁建立CALayer還有例項化動畫，所以不管在OC中還是Swift中都抽取一下公共的方法用來偷懶。哈哈～這就是本宅胖越來越發福的原因。

這裡使用了extension的方式，在程式碼少的時候看不出來優勢。程式碼多了有事就非常明顯了，最大的好處就是可以很容易快速定位到程式碼區域。

extension的作用之一就是可以很清晰的區分出各個func。

使用extension區分程式碼
使用extension區分程式碼

靜態擷取圖：是不是很清晰？

Paste_Image.png
Paste_Image.png

2.1 抽取建立CALayer的公共方法

    //    建立calayer
    fileprivate func createLayer (position: CGPoint, backgroundColor: UIColor) -> CALayer {
        //建立calayer
        let layer = CALayer()
        //設定位置和大小
        layer.position = position
        layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
        //設定背景顏色
        layer.backgroundColor = backgroundColor.cgColor
        //把layer新增到UIView的layer上
        self.view.layer.addSublayer(layer)

        return layer
    }複製程式碼

2.2 抽取建立動畫的公共方法

這裡要把keyPath抽取出來的原因也是因為偷懶，因為不管是旋轉動畫還是縮放動畫，都需要使用這個屬性。所以抽取出來一個公共的方法，就可以兩種動畫共用一個啦。是不是懶到家了？

關於keyPath的欄位有啥作用，可以看看第三篇：iOS動畫系列之三：Core Animation。介紹了Core Animation的常用屬性和方法。

4.3 animationWithKeyPath中，常用的keyPath

這個裡面有詳細的說明。

程式碼如下：

    //建立基礎Animation
    fileprivate func createAnimation (keyPath: String, toValue: CGFloat) -> CABasicAnimation {
        //建立動畫物件
        let scaleAni = CABasicAnimation()
        //設定動畫屬性
        scaleAni.keyPath = keyPath

        //設定動畫的起始位置。也就是動畫從哪裡到哪裡。不指定起點，預設就從positoin開始
        scaleAni.toValue = toValue

        //動畫持續時間
        scaleAni.duration = 2;

        //動畫重複次數
        scaleAni.repeatCount = Float(CGFloat.greatestFiniteMagnitude)

        return scaleAni;
    }複製程式碼

3. 懶載入Layer

懶載入的目的是為了在View例項化的時候不進行建立，用的時候才進行建立。這樣可以一定程度上提高效率。

// 懶載入縮放的layer
    private lazy var redLayer: CALayer = {
        let layer = self.createLayer(position: CGPoint(x: 125, y: 150), backgroundColor: UIColor.red)

        return layer
    }()複製程式碼

4. 新增動畫

在這裡就能夠體現出來抽取公共方法的好處了吧。呼叫一下，傳幾個引數就好了。輕鬆，簡單，還有easy！

4.1 新增縮放動畫

//        新增縮放的動畫
        redLayer.add(createAnimation(keyPath: "transform.scale.x", toValue: 0.5), forKey: nil)

        blueLayer.add(createAnimation(keyPath: "transform.scale.y", toValue: 0.5), forKey: nil)

        grayLayer.add(createAnimation(keyPath: "transform.scale.z", toValue: 0.5), forKey: nil)

        greenLayer.add(createAnimation(keyPath: "transform.scale", toValue: 0.5), forKey: nil)複製程式碼

4.2 新增旋轉動畫

//        新增旋轉的動畫
        redRotationLayer.add(createAnimation(keyPath: "transform.rotation.x", toValue: CGFloat(M_PI_4)), forKey: nil)

        blueRotationLayer.add(createAnimation(keyPath: "transform.rotation.y", toValue: CGFloat(M_PI_4)), forKey: nil)

        grayRotationLayer.add(createAnimation(keyPath: "transform.rotation.z", toValue: CGFloat(M_PI_4)), forKey: nil)複製程式碼

今天就到這裡啦，枯燥無味的CABasicAnimation基礎部分終於分享完了。下一篇可以嘗試使用CABasicAnimation做點好玩的東東。

喜歡的話就點個讚唄，或者賞俺點口糧。麼麼噠～愛你們～

OC和Swift的下載地址如下：
git.oschina.net/atypical/CA…

iOS實踐：CABasic-Animation（OC和Swift兩版）

-----------------------華麗分割線，iOS動畫系列全集連結-------------------------------------------------
第一篇：iOS動畫系列之一：通過實戰學習CALayer和透視的原理。做一個帶時分秒指標的時鐘動畫(上)
第二篇：iOS動畫系列之二：通過實戰學習CALayer和透視的原理。做一個帶時分秒指標的時鐘動畫。包含了OC和Swift兩種原始碼(下)
第三篇：iOS動畫系列之三：Core Animation。介紹了Core Animation的常用屬性和方法。
第四篇：CABasic Animation。iOS動畫系列之四：基礎動畫之平移篇
第五篇：CABasic Animation。iOS動畫系列之五：基礎動畫之縮放篇&旋轉篇
第六篇：iOS動畫系列之六：利用CABasic Animation完成帶動畫特效的登入介面
第七篇：iOS動畫系列之七：實現類似Twitter的啟動動畫
第八篇：iOS動畫系列之八：使用CAShapeLayer繪畫動態流量圖
第九篇：iOS動畫系列之九：實現點讚的動畫及播放起伏指示器
第十篇：實戰系列:繪製過山車場景

相關文章