iOS動畫進階 - 實現炫酷的上拉重新整理動效

標籤：ble   height   ima   get   print   reg   lob   fresh   value   

移動端訪問不佳，請訪問我的個人部落格

最近擼了一個上拉重新整理的小輪子，只要遵循一個協議就能自訂自己動效的上拉重新整理和載入，我自己也寫了幾個動效進去，下面是一個比較好的動效的實現過程

先上和github地址，有其他好的動效大家也可以交流~

動效的原地址，在uimovement網站上看到這個動效時感覺特別6，就想自己實現一下，費了很長時間，換了幾種方案終於實現出來了，下面是實現的步驟：

分析動效

寫一個動效的第一步就應該仔細的去分析它，把它的每一幀展開來看，找一個最合適的方式來實現它，下面是我分析過程：

• 看到曲線，肯定會想到CAShapeLayer和UIBezierPath這一對搭檔，相對於CoreGraphics而言，它即簡單有高效；
• 曲線的拉拽效果可以用 CADisplayLink加上一個參考的view，以參考view為UIBezierPath的一個controlPoint，移動參考view來實現曲線拉拽的效果；
• 曲線的回彈效果考慮再三後決定使用CAKeyframeAnimation配合CAShapeLayer來使用，本來打算使用CASpringanimation來實現，但是考慮它是iOS9出的，而我的輪子最低支援iOS8，就放棄用它了；
• 小球是實現和彈出就相對簡單了，使用CAShapeLayer來實現小球，用CABasicAnimation來實現小球的移動；
• 小球外層圓環旋轉的效果，首先也是用CAShapeLayer來實現圓環，然後配合CABasicAnimation控制CAShapeLayer的strokeEnd和transform.rotation.z一直來實現外層圓環旋轉的效果；
• 最後就是比較複雜的就是小球和曲線的串連處的處理，我的實現方式是通過CADisplayLink在動畫的過程中即時的去監聽小球和曲線的位置，計算出UIBezierPath用一個CAShapeLayer來精確的串連小球和曲線部分。

好了，以上是大概過程，如果大家有另外的更好的實現方式，也可以一起來討論。

繪製曲線和曲線的拉拽

我們用CAShapeLayer和UIBezierPath這一對搭檔來實現曲線的繪製，下面以一個參考view來給大家示範一下，下面是主要代碼和：

// 通過傳遞的y座標來繪製曲線func wave(_ y: CGFloat, execute: CGFloat) {    self.execute = execute    waveLayer.path = wavePath(x: 0, y: y)    if !isAnimation {        var trans = CGAffineTransform.identity        trans = trans.translatedBy(x: 0, y: y)        reference.transform = trans    }}// 計算pathprivate func wavePath(x: CGFloat, y: CGFloat) -> CGPath {    let w = frame.width    let path = UIBezierPath()    if y < execute {        path.move(to: .zero)        path.addLine(to: .init(x: w, y: 0))        path.addLine(to: .init(x: w, y: y))        path.addLine(to: .init(x: 0, y: y))        path.addLine(to: .zero)    }else {        path.move(to: .zero)        path.addLine(to: .init(x: w, y: 0))        path.addLine(to: .init(x: w, y: execute))        path.addQuadCurve(to: .init(x: 0, y: execute), controlPoint: .init(x: w/2, y: y))        path.addLine(to: .zero)    }    return path.cgPath}

曲線的回彈效果

曲線的回彈使用CAKeyframeAnimation加到參考的view上，然後用CADisplayLink監聽參考view的座標做為controlPoint來實現曲線的回彈效果，下面是主要代碼和：

// 開始動畫func startAnimation() {    isAnimation = true    addDisPlay()    boundAnimation(x: 0, y: execute)}// CAKeyframeAnimation動畫private func boundAnimation(x: CGFloat, y: CGFloat) {    let bounce = CAKeyframeAnimation(keyPath: "transform.translation.y")    bounce.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)    bounce.duration = bounceDuration    bounce.values = [        reference.frame.origin.y,        y * 0.5,        y * 1.2,        y * 0.8,        y * 1.1,        y    ]    bounce.isRemovedOnCompletion = true    bounce.fillMode = kCAFillModeForwards    bounce.delegate = self    reference.layer.add(bounce, forKey: "return")}// 添加和移除CADisplayLinkprivate func addDisPlay() {    displayLink = CADisplayLink(target: self, selector: #selector(displayAction))    displayLink?.add(to: .main, forMode: .commonModes)}private func removeDisPlay() {    displayLink?.invalidate()    displayLink = nil}// CADisplayLink綁定的方法@objc private func displayAction() {    if let frame = reference.layer.presentation()?.frame {        DispatchQueue.global().async {            let path = self.displayWavePath(x: 0, y: frame.origin.y + referenceHeight/2)            DispatchQueue.main.async {                self.waveLayer.path = path            }        }    }}// 通過這個方法擷取pathprivate func displayWavePath(x: CGFloat, y: CGFloat) -> CGPath {    let w = frame.width    let path = UIBezierPath()    path.move(to: .zero)    path.addLine(to: .init(x: w, y: 0))    path.addLine(to: .init(x: w, y: execute))    path.addQuadCurve(to: .init(x: 0, y: execute), controlPoint: .init(x: w/2, y: y))    path.addLine(to: .zero)    return path.cgPath}

外層圓環的動畫

小球和外層圓環我們用CAShapeLayer來繪製，這裡主要講的是動畫的實現，動畫主要由兩個部分組成：

• CABasicAnimation控制外層圓環的strokeEnd的動畫；
• CABasicAnimation控制外層圓環的transform.rotation.z的旋轉動畫；

外層圓環的strokeEnd動畫	外層圓環的transform.rotation.z的旋轉動畫

下面是關鍵代碼：

func animation() {    self.isHidden = false    let rotate = CABasicAnimation(keyPath: "transform.rotation.z")    rotate.fromValue = 0    rotate.toValue = M_PI * 2    rotate.duration = 1    rotate.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)    rotate.repeatCount = HUGE    rotate.fillMode = kCAFillModeForwards    rotate.isRemovedOnCompletion = false    self.add(rotate, forKey: rotate.keyPath)    strokeEndAnimation()}func strokeEndAnimation() {    let endPoint = CABasicAnimation(keyPath: "strokeEnd")    endPoint.fromValue = 0    endPoint.toValue = 1    endPoint.duration = 1.8    endPoint.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)    endPoint.repeatCount = HUGE    endPoint.fillMode = kCAFillModeForwards    endPoint.isRemovedOnCompletion = false    endPoint.delegate = self    add(endPoint, forKey: endPoint.keyPath)}

小球上升和串連處的處理

小球上升動畫很簡單，一個CABasicAnimation動畫就實現了，主要麻煩的是串連處的動畫實現，我的方案是在小球動畫過程中通過CADisplayLink即時監聽小球和參考view的位置，計算出貝斯爾曲線，然後通過一個名為linkLayer: CAShapeLayer的layer來串連它們，然後讓它們在特定的地方斷開，下面是主要代碼和：

@objc private func displayAction() {    let offY = ballLayer.circleLayer.presentation()?.frame.origin.y    let frame1 = ballLayer.frame    let frame2 = wavelayer.reference.layer.presentation()?.frame        if let offY = offY, let frame2 = frame2 {            DispatchQueue.global().async {                // 判斷是球是向上還是下，false為上,速度快時，擷取的位置不及時，向下時需要調整位置                let isIncrement = (offY - self.previousOffY) > 0                let path = UIBezierPath()                let x1 = frame1.origin.x + (isIncrement ? 4 : 0)                let y1 = frame1.origin.y + offY                let w1 = frame1.size.width - (isIncrement ? 8 : 0)                let h1 = frame1.size.height                let x2 = frame2.origin.x                let y2 = frame2.origin.y                let w2 = frame2.size.width                let h2 = frame2.size.height                let subY = y2 - y1                // y1和y2的間距                let subScale = subY/self.execute/2                // 斷開的距離為10                let executeSub = self.ballLayer.circleLayer.moveUpDist + offY                if executeSub < 10 {                    if !isIncrement {                        let executeSubScale = executeSub/10                        path.move(to: .init(x: x1 - 15, y: y2 + h2/2 + 15))                        path.addLine(to: .init(x: x1 + w1 + 15, y: y2 + h2/2 + 15))                        path.addQuadCurve(to: .init(x: x1 - 15, y: y2 + h2/2 + 15), controlPoint: .init(x: x1 + w1/2, y: y2 + h2/2 - self.execute/6 * executeSubScale))                    }                }else {                    path.move(to: .init(x: x2 , y: y2 + h2))                    path.addLine(to: .init(x: x2 + w2, y: y2 + h2))                    path.addQuadCurve(to: .init(x: x1 + w1, y: y1 + h1/2), controlPoint: .init(x: x1 + w1 - w1*2*subScale, y: y1 + (y2 - y1)/2 + h1/2 + h2/2))                    path.addLine(to: .init(x: x1, y: y1 + h1/2))                    path.addQuadCurve(to: .init(x: x2 , y: y2 + h2), controlPoint: .init(x: x1 + w1*2*subScale, y: y1 + (y2 - y1)/2 + h1/2 + h2/2))                    if y1 + h1 <= self.execute, isIncrement {                        DispatchQueue.main.async {                            self.wavelayer.startDownAnimation()                        }                    }                }                DispatchQueue.main.async {                    self.linkLayer.path = path.cgPath                }                self.previousOffY = offY            }        }}

我覺得我這個地方的處理不是很好，但是簡單粗暴的解決了問題，如果大家有更好的建議，可以提出來，大家一起交流學習~

完整的代碼，大家可以去github地址去下載，歡迎大家star和發表意見和貢獻代碼，有好的動效的話也可以提供，最後謝謝大家的閱讀

iOS動畫進階 - 實現炫酷的上拉重新整理動效