iOS動畫進階 - 手摸手教你寫 Slack 的 Loading 動畫

標籤：

如果移動端訪問不佳，可以訪問我的個人部落格

前幾天看了一篇關於動畫的部落格叫手摸手教你寫 Slack 的 Loading 動畫，看著挺炫，但是是安卓版的，尋思的著仿造著寫一篇iOS版的，下面是我寫這個動畫的分解~

老規矩先和demo地址：

剛看到這個動畫的時候，腦海裡出現了兩個方案，一種是通過drawRect畫出來，然後配合CADisplayLink不停的繪製線的樣式；第二種是通過CAShapeLayer配合CAAnimation來實現動畫效果。再三考慮覺得使用後者，因為前者需要計算很多，比較複雜，而且經過測試前者相比於後者消耗更多的CPU，下面將我的思路寫下來：

相關配置和初始化方法

在寫這個動畫之前，我們把先需要的屬性寫好，比如線條的粗細，動畫的時間等等，下面是相關的配置和初識化方法：

    //線的寬度    var lineWidth:CGFloat = 0    //線的長度    var lineLength:CGFloat = 0    //邊距    var margin:CGFloat = 0    //動畫時間    var duration:Double = 2    //動畫的間隔時間    var interval:Double = 1    //四條線的顏色    var colors:[UIColor] = [UIColor.init(rgba: "#9DD4E9") , UIColor.init(rgba: "#F5BD58"),  UIColor.init(rgba: "#FF317E") , UIColor.init(rgba: "#6FC9B5")]    //動畫的狀態    private(set) var status:AnimationStatus = .Normal    //四條線    private var lines:[CAShapeLayer] = []    enum AnimationStatus {        //普通狀態        case Normal        //動畫中        case Animating        //暫停        case pause    }     //MARK: Initial Methods    convenience init(fram: CGRect , colors: [UIColor]) {        self.init()        self.frame = frame        self.colors = colors        config()    }    override init(frame: CGRect) {        super.init(frame: frame)        config()    }    required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)        config()    }    private func config() {        lineLength = max(frame.width, frame.height)        lineWidth  = lineLength/6.0        margin     = lineLength/4.5 + lineWidth/2        drawLineShapeLayer()        transform = CGAffineTransformRotate(CGAffineTransformIdentity, angle(-30))    }

通過CAShapeLayer繪製線條

看到這個線條我就想到了用CAShapeLayer來處理，因為CAShapeLayer完全可以實現這種效果，而且它的strokeEnd的屬性可以用來實現線條的長度變化的動畫，下面上繪製四根線條的代碼：

//MARK: 繪製線    /**     繪製四條線     */    private func drawLineShapeLayer() {        //開始點        let startPoint = [point(lineWidth/2, y: margin),                          point(lineLength - margin, y: lineWidth/2),                          point(lineLength - lineWidth/2, y: lineLength - margin),                          point(margin, y: lineLength - lineWidth/2)]        //結束點        let endPoint   = [point(lineLength - lineWidth/2, y: margin) ,                         point(lineLength - margin, y: lineLength - lineWidth/2) ,                         point(lineWidth/2, y: lineLength - margin) ,                         point(margin, y: lineWidth/2)]        for i in 0...3 {            let line:CAShapeLayer = CAShapeLayer()            line.lineWidth   = lineWidth            line.lineCap     = kCALineCapRound            line.opacity     = 0.8            line.strokeColor = colors[i].CGColor            line.path        = getLinePath(startPoint[i], endPoint: endPoint[i]).CGPath            layer.addSublayer(line)            lines.append(line)        }    }    /**     擷取線的路徑     - parameter startPoint: 開始點     - parameter endPoint:   結束點     - returns: 線的路徑     */    private func getLinePath(startPoint: CGPoint, endPoint: CGPoint) -> UIBezierPath {        let path = UIBezierPath()        path.moveToPoint(startPoint)        path.addLineToPoint(endPoint)        return path    }    private func point(x:CGFloat , y:CGFloat) -> CGPoint {        return CGPointMake(x, y)    }    private func angle(angle: Double) -> CGFloat {        return CGFloat(angle *  (M_PI/180))    }

執行完後就跟一樣的效果了~~~

動畫分解

經過分析，可以將動畫分為四個步驟：

• 畫布的旋轉動畫，旋轉兩圈
• 線條由長變短的動畫，更畫布選擇的動畫一起執行，旋轉一圈的時候結束
• 線條的位移動畫，線條逐漸向中間靠攏，再畫筆旋轉完一圈的時候執行，兩圈的時候結束
• 線條由短變長的動畫，畫布旋轉完兩圈的時候執行

第一步畫布旋轉動畫

這裡我們使用CABasicAnimation基礎動畫，keyPath作用於畫布的transform.rotation.z，以z軸為目標進行旋轉，下面是和代碼：

//MARK: 動畫步驟    /**     旋轉的動畫，旋轉兩圈     */    private func angleAnimation() {        let angleAnimation                 = CABasicAnimation.init(keyPath: "transform.rotation.z")        angleAnimation.fromValue           = angle(-30)        angleAnimation.toValue             = angle(690)        angleAnimation.fillMode            = kCAFillModeForwards        angleAnimation.removedOnCompletion = false        angleAnimation.duration            = duration        angleAnimation.delegate            = self        layer.addAnimation(angleAnimation, forKey: "angleAnimation")    }

第二步線條由長變短的動畫

這裡我們還是使用CABasicAnimation基礎動畫，keyPath作用於線條的strokeEnd屬性，讓strokeEnd從1到0來實現線條長短的動畫，下面是和代碼：

/**     線的第一步動畫，線長從長變短     */    private func lineAnimationOne() {        let lineAnimationOne                 = CABasicAnimation.init(keyPath: "strokeEnd")        lineAnimationOne.duration            = duration/2        lineAnimationOne.fillMode            = kCAFillModeForwards        lineAnimationOne.removedOnCompletion = false        lineAnimationOne.fromValue           = 1        lineAnimationOne.toValue             = 0        for i in 0...3 {            let lineLayer = lines[i]            lineLayer.addAnimation(lineAnimationOne, forKey: "lineAnimationOne")        }    }

第三步線條的位移動畫

這裡我們也是使用CABasicAnimation基礎動畫，keyPath作用於線條的transform.translation.x和transform.translation.y屬性，來實現向中間聚攏的效果，下面是和代碼：

/**     線的第二步動畫，線向中間平移     */    private func lineAnimationTwo() {        for i in 0...3 {            var keypath = "transform.translation.x"            if i%2 == 1 {                keypath = "transform.translation.y"            }            let lineAnimationTwo = CABasicAnimation.init(keyPath: keypath)            lineAnimationTwo.beginTime = CACurrentMediaTime() + duration/2            lineAnimationTwo.duration = duration/4            lineAnimationTwo.fillMode = kCAFillModeForwards            lineAnimationTwo.removedOnCompletion = false            lineAnimationTwo.autoreverses = true            lineAnimationTwo.fromValue = 0            if i < 2 {                lineAnimationTwo.toValue = lineLength/4            }else {                lineAnimationTwo.toValue = -lineLength/4            }            let lineLayer = lines[i]            lineLayer.addAnimation(lineAnimationTwo, forKey: "lineAnimationTwo")        }        //三角形兩邊的比例        let scale = (lineLength - 2*margin)/(lineLength - lineWidth)        for i in 0...3 {            var keypath = "transform.translation.y"            if i%2 == 1 {                keypath = "transform.translation.x"            }            let lineAnimationTwo = CABasicAnimation.init(keyPath: keypath)            lineAnimationTwo.beginTime = CACurrentMediaTime() + duration/2            lineAnimationTwo.duration = duration/4            lineAnimationTwo.fillMode = kCAFillModeForwards            lineAnimationTwo.removedOnCompletion = false            lineAnimationTwo.autoreverses = true            lineAnimationTwo.fromValue = 0            if i == 0 || i == 3 {                lineAnimationTwo.toValue = lineLength/4 * scale            }else {                lineAnimationTwo.toValue = -lineLength/4 * scale            }            let lineLayer = lines[i]            lineLayer.addAnimation(lineAnimationTwo, forKey: "lineAnimationThree")        }    }

第四步線條恢複的原來長度的動畫

這裡我們還是使用CABasicAnimation基礎動畫，keyPath作用於線條的strokeEnd屬性，讓strokeEnd從0到1來實現線條長短的動畫，下面是和代碼：

/**     線的第三步動畫，線由短變長     */    private func lineAnimationThree() {        //線移動的動畫        let lineAnimationFour                 = CABasicAnimation.init(keyPath: "strokeEnd")        lineAnimationFour.beginTime            = CACurrentMediaTime() + duration        lineAnimationFour.duration            = duration/4        lineAnimationFour.fillMode            = kCAFillModeForwards        lineAnimationFour.removedOnCompletion = false        lineAnimationFour.fromValue           = 0        lineAnimationFour.toValue             = 1        for i in 0...3 {            if i == 3 {                lineAnimationFour.delegate = self            }            let lineLayer = lines[i]            lineLayer.addAnimation(lineAnimationFour, forKey: "lineAnimationFour")        }    }

最後一步需要將動畫組合起來

關於動畫組合我沒用到CAAnimationGroup，因為這些動畫並不是加到同一個layer上，再加上動畫類型有點多加起來也比較麻煩，我就通過動畫的beginTime屬性來控制動畫的執行順序，還加了動畫暫停和繼續的功能，效果和代碼見：

//MARK: Public Methods    /**     開始動畫     */    func startAnimation() {        angleAnimation()        lineAnimationOne()        lineAnimationTwo()        lineAnimationThree()    }    /**      暫停動畫     */    func pauseAnimation() {        layer.pauseAnimation()        for lineLayer in lines {            lineLayer.pauseAnimation()        }        status = .pause    }    /**     繼續動畫     */    func resumeAnimation() {        layer.resumeAnimation()        for lineLayer in lines {            lineLayer.resumeAnimation()        }        status = .Animating    }    extension CALayer {    //暫停動畫    func pauseAnimation() {        // 將目前時間CACurrentMediaTime轉換為layer上的時間, 即將parent time轉換為localtime        let pauseTime = convertTime(CACurrentMediaTime(), fromLayer: nil)        // 設定layer的timeOffset, 在繼續操作也會使用到        timeOffset    = pauseTime        // localtime與parenttime的比例為0, 意味著localtime暫停了        speed         = 0;    }    //繼續動畫    func resumeAnimation() {        let pausedTime = timeOffset        speed          = 1        timeOffset     = 0;        beginTime      = 0        // 計算暫停時間        let sincePause = convertTime(CACurrentMediaTime(), fromLayer: nil) - pausedTime        // local time相對於parent time時間的beginTime        beginTime      = sincePause    }}//MARK: Animation Delegate    override func animationDidStart(anim: CAAnimation) {        if let animation = anim as? CABasicAnimation {            if animation.keyPath == "transform.rotation.z" {                status = .Animating            }        }    }    override func animationDidStop(anim: CAAnimation, finished flag: Bool) {        if let animation = anim as? CABasicAnimation {            if animation.keyPath == "strokeEnd" {                if flag {                    status = .Normal                    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, Int64(interval) * Int64(NSEC_PER_SEC)), dispatch_get_main_queue(), {                        if self.status != .Animating {                            self.startAnimation()                        }                    })                }            }        }    }     //MARK: Override    override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {        switch status {        case .Animating:            pauseAnimation()        case .pause:            resumeAnimation()        case .Normal:            startAnimation()        }    }

總結

動畫看起來挺複雜，但是細細劃分出來也就那麼回事，在寫動畫之前要先想好動畫的步驟，這個很關鍵，希望大家通過這篇部落格可以學到東西，有什麼好的建議可以隨時提出來，謝謝大家閱讀~~demo地址

iOS動畫進階 - 手摸手教你寫 Slack 的 Loading 動畫