基本上所有的 APP 都会有 tableView,那一般情况下就会有下拉刷新这个功能，就想着自己也来自定义一个下拉刷新的控件。
先看一下要实现的效果：
Refresh.gif
这是一部分的动画，实际上在这里我将触摸位置分成了三部分，左边，中间，右边，拖拽的位置不同，曲线的形变也不一样。
观察动画，首先是拖拽的时候会根据拖拽的幅度进行曲线形变，这就需要监听滑动手势，我在这里的做法是获取 ScrollView的引用，并且设置KVO监听 ContentOffset的改变。
ScrollView 有一个属性，panGesture 滑动手势，所以能得到触摸位置。
//设置相关属性
self.superScrollView.addSubview(self)
self.superScrollView = superScrollView
//设置kvo
self.superScrollView.addObserver(self, forKeyPath:"contentOffset", options: NSKeyValueObservingOptions.new, context:nil)
在ScrollView拖动的时候都会改变 ContentOffset,然后回调override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?),在这个方法里面进行操作。
直接上代码
开始先判断一下是否是向下拖动，向下拖动的话因为没有添加上拉加载的功能，所以不做处理。
if self.superScrollView.contentOffset.y > 0 {
return
}
拖动的时候也会有状态，如果正处于刷新状态的话，不应该被再出拖动，重新加载，所以定义一个Struct。
enum MXRefreshStatus {
case refreshing
case none
}
回到KVO的监听方法
if self.refreshStatus == .none {
//获取点击位置
if self.touchPositionX == 0 {
self.touchPositionX =
self.superScrollView.panGestureRecognizer.location(in: self.superScrollView).x
}
let contentOffsetY = abs(self.superScrollView.contentOffset.y)
//是否还在拖动
if self.superScrollView.isDragging {
//继续拖动
//最高点坐标
let highPointY = contentOffsetY - 64.0
let path = self.updateWavePath(highPointY: highPointY, position: nil)
self.waveLayer.path = path.cgPath
}else{
//没有拖动了，判断是否直接刷新
if contentOffsetY >= 150{
//改变状态
self.refreshStatus = .refreshing
//执行弹性动画
self.waveLayer.add(self.waveLayerAnimation, forKey: "WaveAnimation")
//固定住
var contentInset = self.superScrollView.contentInset
contentInset.top = 214
self.superScrollView.contentInset = contentInset
//开始执行 block
self.operation(true)
//设置延时操作
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + self.duration, execute: {
//去除所有动画
self.removeAllAnimtion()
//修改状态
self.refreshStatus = .none
//回收刷新 View
var contentInset = self.superScrollView.contentInset
contentInset.top = 64
self.superScrollView.contentInset = contentInset
//修改点击位置
self.touchPositionX = 0
})
}else{
//不做操作,直接缩放回去
if self.waveLayer.path != self.rectPath.cgPath {
self.waveLayer.path = self.rectPath.cgPath
}
//修改点击位置
self.touchPositionX = 0
//修改状态
self.refreshStatus = .none
}
}
}else{
//正处于刷新状态,直接返回
return
}
减去64是因为考虑了导航栏的存在，有了导航栏之后，所有的TableView都会下移64，并且ContentInset.top属性会为64。用以固定住 tableView不会回滚。
这里放几张斯坦福大学解释ContentOffset,ContentInset,ContentSize的图。
ContentSize.png
ContentInset.png
ContentOffset.png
知道了这三个attribute之后,应该就知道了刷新过程中如何将 ScrollView固定住，只需要设置ContentInset.top的值就行，同理，以后要在其他方向固定，也是设置这个属性。
在拖拽的过程中，曲线一直在形变，在调用updateWavePath
let path = self.updateWavePath(highPointY: highPointY, position: nil)
self.waveLayer.path = path.cgPath
这就是绘制曲线形变的方法
//MARK: wavePath Stroke
private func updateWavePath(highPointY : CGFloat,position : MXRefreshPosition?)->UIBezierPath{
let path = UIBezierPath.init()
let lineY = self.waveLayer.bounds.size.height
path.move(to: CGPoint.init(x: 0, y: 0))
path.addLine(to: CGPoint.init(x: self.waveLayer.frame.width, y: 0.0))
path.addLine(to: CGPoint.init(x: self.waveLayer.frame.width, y: self.waveLayer.frame.height))
//使用贝塞尔曲线
//控制点
var controlPoint : CGPoint!
//触摸
controlPoint = CGPoint.init(x: self.touchPositionX, y: highPointY + lineY)
//绘制路径
if (self.touchPositionX != 0 && self.touchPositionX <= self.superScrollView.frame.width / 3.0) || (position != nil && position == .left) {
//左边
let destinationPointX = self.waveLayer.frame.width / 3.0 * 2.0
path.addLine(to: CGPoint.init(x: destinationPointX, y: lineY))
path.addQuadCurve(to: CGPoint.init(x: 0, y: lineY), controlPoint: controlPoint)
}else if (self.touchPositionX != 0 && self.touchPositionX >= (self.superScrollView.frame.width - self.superScrollView.frame.width / 3.0)) || (position != nil && position == .right) {
//右边
let destinationPointX = self.waveLayer.frame.width / 3.0
path.addQuadCurve(to: CGPoint.init(x: destinationPointX, y: lineY), controlPoint: controlPoint)
path.addLine(to: CGPoint.init(x: 0, y: lineY))
}else{
//中间
let leftStartPositionX = self.waveLayer.frame.width / 4.0
let rightEndPositionX = self.waveLayer.frame.width / 4.0 * 3.0
path.addLine(to: CGPoint.init(x: rightEndPositionX, y: lineY))
path.addQuadCurve(to: CGPoint.init(x: leftStartPositionX, y: lineY), controlPoint: controlPoint)
path.addLine(to: CGPoint.init(x: 0, y: lineY))
}
//闭合路径，连接首尾
path.close()
return path
}
这个是根据拖动Y的程度，去设置曲线的Control Point，原理是贝塞尔曲线，这里就不多说了，可以去查阅，有许多的资料专门介绍这个曲线。
同时监听手指松开的时候也只需要判断ScrollView.isDragging属性，拖拽结束时候判断已经拖动的距离，达到刷新条件就刷新，没有就直接缩回去。
达到刷新条件之后的弹性效果，我是采用CAKeyframeAnimation做的，还有一部分是使用CADisplayLink去实现，在每一帧去重新绘制，我觉得这个动画是一直会需要使用，不如就直接实例化，作为属性，每一次都只需add就行。
self.waveLayerAnimation = CAKeyframeAnimation.init(keyPath: "path")
self.waveLayerAnimation.values = [
self.updateWavePath(highPointY: 100.0, position: .left).cgPath,
self.updateWavePath(highPointY: -80.0, position: .left).cgPath,
self.updateWavePath(highPointY: 60.0, position: .left).cgPath,
self.updateWavePath(highPointY: -40.0, position: .left).cgPath,
self.updateWavePath(highPointY: 10.0, position: .left).cgPath,
self.updateWavePath(highPointY: -5.0, position: .left).cgPath,
self.updateWavePath(highPointY: 1.0, position: .left).cgPath,
self.rectPath.cgPath
]
self.waveLayerAnimation.isRemovedOnCompletion = false
self.waveLayerAnimation.fillMode = kCAFillModeForwards
self.waveLayerAnimation.duration = 0.5
self.waveLayerAnimation.autoreverses = false
动画的原理就是在duration内设置曲线的ControlPoint一直是在上下改变，曲线的弯曲方向也就会改变，同时慢慢减少，也就形成了bounce效果。
这里的曲线是单独设置的,不能和触摸绘制关联起来，所以在update里面。
if position != nil {
let controlX : CGFloat = self.waveLayer.frame.width / 2.0
controlPoint = CGPoint.init(x: controlX, y: highPointY + lineY)
//Path
path.addQuadCurve(to: CGPoint.init(x: 0, y: lineY), controlPoint: controlPoint)
}
圆的动画是在曲线的动画完成之后才执行的，所以就设置曲线的delegate。
//Delegate
self.waveLayerAnimation.delegate = self
self.waveLayerAnimation.setValue("WaveAnimation", forKey: "identifier")
CAAnimationDelegate的回调是深拷贝，所以如果动画多的话，不能直接去用==比较，要单独区分开，我认为使用KVC比较好。
extension MXRefreshView : CAAnimationDelegate {
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
switch anim.value(forKey: "identifier") as! String {
case "WaveAnimation":
//执行圆圈动画
self.refreshLoadingImageView.startAnimation()
break
default:
break
}
}
}
圆圈的动画很简单，只是设置CAKeyframeAnimation.path，这个值和values只能有一个，同时存在有效的只有path，path是作用于position和anchorPoint的，所有记得设置keypath。
直接给代码了
//BigCircle
self.bigLoadingCircleAnimation = CAKeyframeAnimation.init(keyPath: "path")
self.bigLoadingCircleAnimation.values = [
UIBezierPath.init(arcCenter: CGPoint.init(x: self.bigLoadingCircle.frame.width / 2.0, y: self.bigLoadingCircle.frame.width / 2.0), radius: self.bigLoadingCircle.frame.width / 3.0, startAngle: 0, endAngle:CGFloat(M_PI * 2.0), clockwise: true).cgPath,
UIBezierPath.init(arcCenter: CGPoint.init(x: self.bigLoadingCircle.frame.width / 2.0, y: self.bigLoadingCircle.frame.width / 2.0), radius: self.bigLoadingCircle.frame.width / 4.0, startAngle: 0, endAngle:CGFloat(M_PI * 2.0), clockwise: true).cgPath,
UIBezierPath.init(arcCenter: CGPoint.init(x: self.bigLoadingCircle.frame.width / 2.0, y: self.bigLoadingCircle.frame.width / 2.0), radius: self.bigLoadingCircle.frame.width / 5.0, startAngle: 0, endAngle:CGFloat(M_PI * 2.0), clockwise: true).cgPath,
UIBezierPath.init(arcCenter: CGPoint.init(x: self.bigLoadingCircle.frame.width / 2.0, y: self.bigLoadingCircle.frame.width / 2.0), radius: self.bigLoadingCircle.frame.width / 6.0, startAngle: 0, endAngle:CGFloat(M_PI * 2.0), clockwise: true).cgPath,
UIBezierPath.init(arcCenter: CGPoint.init(x: self.bigLoadingCircle.frame.width / 2.0, y: self.bigLoadingCircle.frame.width / 2.0), radius: 2.5, startAngle: 0, endAngle:CGFloat(M_PI * 2.0), clockwise: true).cgPath
]
self.bigLoadingCircleAnimation.timingFunctions = [CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)]
self.bigLoadingCircleAnimation.isRemovedOnCompletion = false
//相当于无限循环
self.bigLoadingCircleAnimation.repeatCount = Float.infinity
self.bigLoadingCircleAnimation.autoreverses = true
self.bigLoadingCircleAnimation.duration = 2.0
//MinCircle
//有多少个小圆，就有多少个动画，因为每个圆的动画有时延
for index in 0..<self.minLoadingCircles.count {
let minLoadingCirclesAnimation = CAKeyframeAnimation.init(keyPath: "position")
let circleMovePath = CGMutablePath.init()
circleMovePath.addArc(center: CGPoint.init(x: self.frame.width / 2.0, y: self.frame.height + 6.0), radius: self.frame.width / 2.0 + 6.0, startAngle: 0.0, endAngle: CGFloat(M_PI * 2.0), clockwise: false)
minLoadingCirclesAnimation.path = circleMovePath
minLoadingCirclesAnimation.isRemovedOnCompletion = false
minLoadingCirclesAnimation.repeatCount = Float.infinity
minLoadingCirclesAnimation.autoreverses = false
minLoadingCirclesAnimation.duration = 2.0
self.minLoadingCirclesAnimations.append(minLoadingCirclesAnimation)
//Delegate
minLoadingCirclesAnimation.setValue(String.init(format: "MinCircleAnimation%d", index), forKey: "identifier")
minLoadingCirclesAnimation.delegate = self
}
完整的代码放在GitHub
每一天都去学习一些东西，最后都会帮助到自己的。
得与失是平衡的，你放下了娱乐和休息的时间，那么就会得到更多的知识。
不积跬步，无以至千里，不积小流，无以成江海。
