最近擼了一個上拉刷新的小輪子珠增，只要遵循一個協(xié)議就能自定義自己動效的上拉刷新和加載纽竣，我自己也寫了幾個動效進(jìn)去奕坟，下面是一個比較好的動效的實現(xiàn)過程
先上效果圖和github地址扒怖，有其他好的動效大家也可以交流~
動效的原地址疗认，在uimovement網(wǎng)站上看到這個動效時感覺特別6完残，就想自己實現(xiàn)一下，費了很長時間横漏，換了幾種方案終于實現(xiàn)出來了谨设，下面是實現(xiàn)的步驟：
分析動效
寫一個動效的第一步就應(yīng)該仔細(xì)的去分析它，把它的每一幀展開來看缎浇，找一個最合適的方式來實現(xiàn)它扎拣，下面是我分析過程：
- 看到曲線，肯定會想到
CAShapeLayer和UIBezierPath這一對搭檔素跺，相對于CoreGraphics而言二蓝，它即簡單有高效； - 曲線的拉拽效果可以用
CADisplayLink加上一個參考的view指厌，以參考view為UIBezierPath的一個controlPoint刊愚，移動參考view來實現(xiàn)曲線拉拽的效果； - 曲線的回彈效果考慮再三后決定使用
CAKeyframeAnimation配合CAShapeLayer來使用踩验，本來打算使用CASpringanimation來實現(xiàn)鸥诽，但是考慮它是iOS9出的商玫，而我的輪子最低支持iOS8，就放棄用它了牡借； - 小球是實現(xiàn)和彈出就相對簡單了拳昌，使用
CAShapeLayer來實現(xiàn)小球，用CABasicAnimation來實現(xiàn)小球的移動钠龙； - 小球外層圓環(huán)旋轉(zhuǎn)的效果炬藤，首先也是用
CAShapeLayer來實現(xiàn)圓環(huán)，然后配合CABasicAnimation控制CAShapeLayer的strokeEnd和transform.rotation.z一直來實現(xiàn)外層圓環(huán)旋轉(zhuǎn)的效果俊鱼； - 最后就是比較復(fù)雜的就是小球和曲線的連接處的處理刻像，我的實現(xiàn)方式是通過
CADisplayLink在動畫的過程中實時的去監(jiān)聽小球和曲線的位置畅买，計算出UIBezierPath用一個CAShapeLayer來精確的連接小球和曲線部分并闲。
好了，以上是大概過程谷羞，如果大家有另外的更好的實現(xiàn)方式帝火，也可以一起來討論。
繪制曲線和曲線的拉拽
我們用CAShapeLayer和UIBezierPath這一對搭檔來實現(xiàn)曲線的繪制湃缎，下面以一個參考view來給大家演示一下犀填，下面是主要代碼和效果圖：
// 通過傳遞的y坐標(biāo)來繪制曲線
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監(jiān)聽參考view的坐標(biāo)做為controlPoint來實現(xiàn)曲線的回彈效果嗓违，下面是主要代碼和效果圖：
// 開始動畫
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
}
外層圓環(huán)的動畫
小球和外層圓環(huán)我們用CAShapeLayer來繪制九巡，這里主要講的是動畫的實現(xiàn)，動畫主要由兩個部分組成：
-
CABasicAnimation控制外層圓環(huán)的strokeEnd的動畫蹂季； -
CABasicAnimation控制外層圓環(huán)的transform.rotation.z的旋轉(zhuǎn)動畫冕广；
外層圓環(huán)的strokeEnd動畫 |
外層圓環(huán)的transform.rotation.z的旋轉(zhuǎn)動畫 |
|---|---|
 |
 |
下面是關(guān)鍵代碼：
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動畫就實現(xiàn)了偿洁，主要麻煩的是連接處的動畫實現(xiàn)撒汉，我的方案是在小球動畫過程中通過CADisplayLink實時監(jiān)聽小球和參考view的位置，計算出貝斯?fàn)柷€涕滋，然后通過一個名為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為上,速度快時溯饵，獲取的位置不及時，向下時需要調(diào)整位置
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
}
}
}
我覺得我這個地方的處理不是很好锨用，但是簡單粗暴的解決了問題瓣喊，如果大家有更好的建議，可以提出來黔酥，大家一起交流學(xué)習(xí)~
完整的代碼藻三，大家可以去github地址去下載洪橘，歡迎大家star和發(fā)表意見和貢獻(xiàn)代碼，有好的動效的話也可以提供棵帽，最后謝謝大家的閱讀
