最近擼了一個(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è)步驟:
- 箭頭的繪制和動(dòng)效
- 圓環(huán)的繪制和小點(diǎn)的旋轉(zhuǎn)
- 對(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)效的話也可以提供,最后謝謝大家的閱讀