iOS動(dòng)畫進(jìn)階 - 實(shí)現(xiàn)炫酷的上拉刷新動(dòng)效（二）

最近擼了一個(gè)上拉刷新的小輪子，只要遵循一個(gè)協(xié)議就能自定義自己動(dòng)效的上拉刷新和加載，我自己也寫了幾個(gè)動(dòng)效進(jìn)去，下面是一個(gè)比較好的動(dòng)效的實(shí)現(xiàn)過程

先上效果圖和github地址，完整代碼個(gè)demo和進(jìn)入查看，有其他好的動(dòng)效大家也可以學(xué)習(xí)交流~

分析動(dòng)效

寫一個(gè)動(dòng)效的第一步就應(yīng)該仔細(xì)的去分析它，把它的每一幀展開來看，找一個(gè)最合適的方式來實(shí)現(xiàn)它，我們可以把以上動(dòng)畫分解成以下三個(gè)步驟：

  1. 箭頭的繪制和動(dòng)效
  2. 圓環(huán)的繪制和小點(diǎn)的旋轉(zhuǎn)
  3. 對(duì)勾的繪制和動(dòng)畫

以下是會(huì)用到主要的類：

  • CAShapeLayer
  • UIBezierPath
  • CABasicAnimation
  • CAKeyframeAnimation
  • DispatchSourceTimer

箭頭的繪制和動(dòng)效

剪頭的繪制我們用CAShapeLayer配合UIBezierPath來實(shí)現(xiàn)，把箭頭分解成兩個(gè)部分，一個(gè)是垂直的線和箭頭頭的部分，方便實(shí)現(xiàn)之后的動(dòng)畫效果，下面是繪制主要的代碼和效果圖：

// 繪制垂直的線
private func initLineLayer() {
    let width  = frame.size.width
    let height = frame.size.height
    let path = UIBezierPath()
    path.move(to: .init(x: width/2, y: 0))
    path.addLine(to: .init(x: width/2, y: height/2 + height/3))
    lineLayer = CAShapeLayer()
    lineLayer?.lineWidth   = lineWidth*2
    lineLayer?.strokeColor = color.cgColor
    lineLayer?.fillColor   = UIColor.clear.cgColor
    lineLayer?.lineCap     = kCALineCapRound
    lineLayer?.path        = path.cgPath
    lineLayer?.strokeStart = 0.5
    addSublayer(lineLayer!)
}

// 繪制箭頭的頭部
private func initArrowLayer() {
    let width  = frame.size.width
    let height = frame.size.height
    let path = UIBezierPath()
    path.move(to: .init(x: width/2 - height/6, y: height/2 + height/6))
    path.addLine(to: .init(x: width/2, y: height/2 + height/3))
    path.addLine(to: .init(x: width/2 + height/6, y: height/2 + height/6))
    arrowLayer = CAShapeLayer()
    arrowLayer?.lineWidth   = lineWidth*2
    arrowLayer?.strokeColor = color.cgColor
    arrowLayer?.lineCap     = kCALineCapRound
    arrowLayer?.lineJoin    = kCALineJoinRound
    arrowLayer?.fillColor   = UIColor.clear.cgColor
    arrowLayer?.path        = path.cgPath
    addSublayer(arrowLayer!)
}

然后是箭頭動(dòng)畫實(shí)現(xiàn)，我們分別對(duì)線和箭頭頭部進(jìn)行動(dòng)畫，通過CABasicAnimation對(duì)它們的strokeStart和strokeEnd進(jìn)行控制來實(shí)現(xiàn)動(dòng)畫，下面是效果圖和主要代碼：

// 箭頭的動(dòng)畫
public func startAnimation() -> Self {
    let start = CABasicAnimation(keyPath: "strokeStart")
    start.duration  = animationDuration
    start.fromValue = 0
    start.toValue   = 0.5
    start.isRemovedOnCompletion = false
    start.fillMode  = kCAFillModeForwards
    start.delegate    = self
    start.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    
    let end = CABasicAnimation(keyPath: "strokeEnd")
    end.duration  = animationDuration
    end.fromValue = 1
    end.toValue   = 0.5
    end.isRemovedOnCompletion = false
    end.fillMode  = kCAFillModeForwards
    end.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    
    arrowLayer?.add(start, forKey: "strokeStart")
    arrowLayer?.add(end, forKey: "strokeEnd")
    
    return self
}

// 線的動(dòng)畫
private func addLineAnimation() {
    let start = CABasicAnimation(keyPath: "strokeStart")
    start.fromValue = 0.5
    start.toValue = 0
    start.isRemovedOnCompletion = false
    start.fillMode  = kCAFillModeForwards
    start.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    start.duration  = animationDuration/2
    lineLayer?.add(start, forKey: "strokeStart")
    
    let end = CABasicAnimation(keyPath: "strokeEnd")
    end.beginTime = CACurrentMediaTime() + animationDuration/3
    end.duration  = animationDuration/2
    end.fromValue = 1
    end.toValue   = 0.03
    end.isRemovedOnCompletion = false
    end.fillMode  = kCAFillModeForwards
    end.delegate  = self
    end.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    lineLayer?.add(end, forKey: "strokeEnd")
}

// 通過delegate控制順序
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
    if flag {
        if let anim = anim as? CABasicAnimation {
            if anim.keyPath == "strokeStart" {
                arrowLayer?.isHidden = true
                addLineAnimation()
            }else {
                lineLayer?.isHidden = true
                animationEnd?()
            }
        }
    }
}

圓環(huán)的繪制和小點(diǎn)的旋轉(zhuǎn)

同樣的圓環(huán)和小店的繪制我們也可以用CAShapeLayer配合UIBezierPath來實(shí)現(xiàn)

，下面是效果圖和主要代碼：

// 繪制外環(huán)
private func drawCircle() {
    let width  = frame.size.width
    let height = frame.size.height
    let path = UIBezierPath()
    path.addArc(withCenter: .init(x: width/2, y: height/2), radius: height/2, startAngle: 0, endAngle: CGFloat(Double.pi * 2.0), clockwise: false)
    circle.lineWidth   = lineWidth
    circle.strokeColor = color.cgColor
    circle.fillColor   = UIColor.clear.cgColor
    circle.path        = path.cgPath
    addSublayer(circle)
    circle.isHidden = true
}

// 繪制小點(diǎn)
private func drawPoint() {
    let width  = frame.size.width
    let path = UIBezierPath()
    path.addArc(withCenter: .init(x: width/2, y: width/2), radius: width/2, startAngle: CGFloat(Double.pi * 1.5), endAngle: CGFloat((Double.pi * 1.5) - 0.1), clockwise: false)
    point.lineCap     = kCALineCapRound
    point.lineWidth   = lineWidth*2
    point.fillColor   = UIColor.clear.cgColor
    point.strokeColor = pointColor.cgColor
    point.path        = path.cgPath
    pointBack.addSublayer(point)
    point.isHidden = true
}

旋轉(zhuǎn)的實(shí)現(xiàn)，因?yàn)樾D(zhuǎn)的速度是有個(gè)加速的效果的，所以我們使用DispatchSourceTimer來控制選擇的速度，下面是效果圖和主要代碼：

// 旋轉(zhuǎn)的控制
public func startAnimation() {
    circle.isHidden = false
    point.isHidden  = false
    
    codeTimer = DispatchSource.makeTimerSource(queue: DispatchQueue.global())
    codeTimer?.scheduleRepeating(deadline: .now(), interval: .milliseconds(42))
    codeTimer?.setEventHandler(handler: { [weak self] in
        guard self != nil else {
            return
        }
        self!.rotated = self!.rotated - self!.rotatedSpeed
        if self!.stop {
            let count = Int(self!.rotated / CGFloat(Double.pi * 2))
            if (CGFloat(Double.pi * 2 * Double(count)) - self!.rotated) >= 1.1 {
                var transform = CGAffineTransform.identity
                transform = transform.rotated(by: -1.1)
                DispatchQueue.main.async {
                    self!.pointBack.setAffineTransform(transform)
                    self!.point.isHidden  = true
                    self!.check?.startAnimation()
                }
                self!.codeTimer?.cancel()
                return
            }
        }
        if self!.rotatedSpeed < 0.65 {
            if self!.speedInterval < 0.02 {
                self!.speedInterval = self!.speedInterval + 0.001
            }
            self!.rotatedSpeed = self!.rotatedSpeed + self!.speedInterval
        }
        var transform = CGAffineTransform.identity
        transform = transform.rotated(by: self!.rotated)
        DispatchQueue.main.async {
            self!.pointBack.setAffineTransform(transform)
        }
    })
    codeTimer?.resume()
    
    addPointAnimation()
}

// 點(diǎn)的變化
private func addPointAnimation() {
    let width  = frame.size.width
    let path = CABasicAnimation(keyPath: "path")
    path.beginTime = CACurrentMediaTime() + 1
    path.fromValue = point.path
    let toPath = UIBezierPath()
    toPath.addArc(withCenter: .init(x: width/2, y: width/2), radius: width/2, startAngle: CGFloat(Double.pi * 1.5), endAngle: CGFloat((Double.pi * 1.5) - 0.3), clockwise: false)
    path.toValue = toPath.cgPath
    path.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    path.duration = 2
    path.isRemovedOnCompletion = false
    path.fillMode = kCAFillModeForwards
    point.add(path, forKey: "path")
}

對(duì)勾的繪制和動(dòng)畫

對(duì)勾的繪制我們也是用CAShapeLayer配合UIBezierPath來繪制，下面是效果圖和主要的代碼：

// 繪制對(duì)號(hào)
private func drawCheck() {
    let width = Double(frame.size.width)
    check = CAShapeLayer()
    check?.lineCap   = kCALineCapRound
    check?.lineJoin  = kCALineJoinRound
    check?.lineWidth = lineWidth
    check?.fillColor = UIColor.clear.cgColor
    check?.strokeColor = color.cgColor
    check?.strokeStart = 0
    check?.strokeEnd = 0
    let path = UIBezierPath()
    let a = sin(0.4) * (width/2)
    let b = cos(0.4) * (width/2)
    path.move(to: CGPoint.init(x: width/2 - b, y: width/2 - a))
    path.addLine(to: CGPoint.init(x: width/2 - width/20 , y: width/2 + width/8))
    path.addLine(to: CGPoint.init(x: width - width/5, y: width/2 - a))
    check?.path = path.cgPath
    addSublayer(check!)
}

對(duì)勾的動(dòng)畫我們通過CAKeyframeAnimation來控制對(duì)勾的strokeStart和strokeEnd來實(shí)現(xiàn)對(duì)勾的動(dòng)畫，下面是效果圖和主要代碼：

// 對(duì)勾的動(dòng)畫
func startAnimation() {
    let start = CAKeyframeAnimation(keyPath: "strokeStart")
    start.values = [0, 0.4, 0.3]
    start.isRemovedOnCompletion = false
    start.fillMode = kCAFillModeForwards
    start.duration = 0.2
    start.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    
    let end = CAKeyframeAnimation(keyPath: "strokeEnd")
    end.values = [0, 1, 0.9]

    end.isRemovedOnCompletion = false
    end.fillMode = kCAFillModeForwards
    end.duration = 0.3
    end.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    
    check?.add(start, forKey: "start")
    check?.add(end, forKey: "end")
}

總結(jié)

關(guān)于小球的旋轉(zhuǎn)我沒有選擇CADisplayLink而是選擇的DispatchSourceTimer，是因?yàn)?code>CADisplayLink會(huì)受到UITableview的影響，關(guān)于動(dòng)畫的實(shí)現(xiàn)需要耐心去調(diào)細(xì)節(jié)，實(shí)現(xiàn)方式也各種各樣，大家如果有什么更好的建議或者建議大家可以提出來~

完整的代碼，大家可以去github地址去下載，歡迎大家star和發(fā)表意見和貢獻(xiàn)代碼，有好的動(dòng)效的話也可以提供，最后謝謝大家的閱讀

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容