iOS 動畫進階 - 實現炫酷的上拉刷新動效

AnnKelleher 7年前發布 | 13K 次閱讀 iOS開發移動開發

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

先上效果圖和 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
    }
}

// 計算path
private 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")
}

// 添加和移除CADisplayLink
private 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
            }
        }
    }
}

// 通過這個方法獲取path
private 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和發表意見和貢獻代碼，有好的動效的話也可以提供，最后謝謝大家的閱讀

來自：http://blog.csdn.net/wang631106979/article/details/62888435

本文由用戶 AnnKelleher 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1489798312115.html

iOS開發移動開發

iOS 動畫進階 - 實現炫酷的上拉刷新動效

分析動效

繪制曲線和曲線的拉拽

曲線的回彈效果

外層圓環的動畫

小球上升和連接處的處理

相關經驗

相關資訊

相關文檔

目錄