实现的效果如下：
实现效果
下拉刷新原理
其实原理很简单：
0.UIScrollView的contentInset属性：用于保持停留
1.UIScrollView的contentOffset属性：获取偏移量，用于控制相应偏移量下，刷新视图如何改变
怎样方便重用
如何获取偏移量？
有两种方式可以获得:
0.在含有UIScrollView（及其子类）控制器里面使用UIScrollViewDelegate，从而获取偏移量。
1.使用强大的KVO啊，通过监听contentOffset，很容易的就得到了偏移量。
但是如果要在多个控制器中使用下拉刷新，那么每个控制器都实现UIScrollViewDelegate或KVO，繁琐且臃肿。
使用UIScrollViewDelegate的方式肯定行不通(通过继承的方式？？像UITableViewController？我没有想到好的解决办法)，因为每个控制器都要实现。故UIScrollViewDelegate的方式被pass掉了。
我们继续考虑使用KVO，KVO监听的是ScrollView及其子类，如果每个控制器都写监听的话也是和UIScrollViewDelegate类似，但是我们可以不写啊。
滚动视图（UIScrollView及其子类）和下拉刷新视图是一块的，有刷新的地方就有下拉刷新视图。我们把下拉刷新视图添加在滚动视图上（UIScrollView及其子类），获得到刷新视图就可以获得滚动视图啦。这样我们把监听写在刷新视图里，就不用到处写了。
还有个问题，我们如何给滚动视图添加下拉刷新视图呢？有没有简单的方式给滚动视图添加下拉刷新视图。我们可以使用扩展，添加一个下拉刷新视图属性，只要我们给这个下拉刷新视图赋值，我们就把他添加到滚动视图上。这样就很简洁啦。
其实上面的这些东西是我读MJRefresh代码发现的，受益匪浅。
实现效果中的三个动画
动画是这个下拉刷新最大的亮点，也是它吸引我，我才决定仿这么一个动画(仿的是RSS阅读器Unread)。
0.展开、关闭动画
原先是使用POP实现的，这次使用多次动画的方式。代码如下，
/**
展开动画
:param: animationLayer 动画Layer
*/
func spreadLayerAnimation(animationLayer: CAShapeLayer){
layerWidthAnimation(animationLayer, width: 100, animationTypeStr: "Spread", animationIndexStr: "1")
}
/**
关闭动画
:param: animationLayer 关闭Layer
*/
func closeLayerAnimation(animationLayer: CAShapeLayer){
layerWidthAnimation(animationLayer, width: 0, animationTypeStr: "Close", animationIndexStr: "1")
}
/**
宽度动画
:param: animationLayer 动画层
:param: width 宽度
:param: animationTypeStr 动画类型 展开或关闭
:param: animationIndexStr 动画索引
*/
func layerWidthAnimation(animationLayer: CAShapeLayer,width: CGFloat,animationTypeStr: String,animationIndexStr: String){
var animationLayerStr = "shapeLayer1"
if animationLayer.isEqual(shapeLayer1){
animationLayerStr = "shapeLayer1"
}
let screenWidth = CGRectGetWidth(UIScreen.mainScreen().bounds)
var animation = CABasicAnimation(keyPath: "bounds.size.width")
animation.duration = 0.13
animation.delegate = self
animation.toValue = NSNumber(float: 20)
animation.setValue(animationLayerStr, forKey: "AnimationLayer")
animation.setValue(animationTypeStr, forKey: "AnimationType")
animation.setValue(animationIndexStr, forKey: "AnimationIndex")
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
animationLayer.addAnimation(animation, forKey: "animation")
animationLayer.frame = CGRect(x: (screenWidth - width)/2.0, y: animationLayer.frame.origin.y, width: CGFloat(width), height: animationLayer.frame.size.height)
}
//MARK 动画结束
override func animationDidStop(anim: CAAnimation!, finished flag: Bool) {
let screenWidth = CGRectGetWidth(UIScreen.mainScreen().bounds)
let animationLayerStr = anim.valueForKey("AnimationLayer") as! String
let animationTypeStr = anim.valueForKey("AnimationType") as! String
let animationIndexStr = anim.valueForKey("AnimationIndex") as! String
var shapeLayer = CAShapeLayer()
if animationLayerStr == "shapeLayer1"{
shapeLayer = shapeLayer1;
}
var width:CGFloat = 0
if animationIndexStr == "1"{
if animationTypeStr == "Spread"{
width = 20
}else if animationTypeStr == "Close"{
width = 20
}
}else if animationIndexStr == "2"{
if animationTypeStr == "Spread"{
width = 80
}else if animationTypeStr == "Close"{
width = 4
}
}else if animationIndexStr == "3"{
if animationTypeStr == "Spread"{
width = 40
}else if animationTypeStr == "Close"{
return
}
}else if animationIndexStr == "4"{
if animationTypeStr == "Spread"{
width = 60
}
}else{
return
}
layerWidthAnimation(shapeLayer, width: width, animationTypeStr: animationTypeStr, animationIndexStr:String(animationIndexStr.toInt()! + 1))
}
1.旋转动画
其实就是沿着一定的路径进行旋转，使用CAKeyframeAnimation的path属性按照响应的贝塞尔曲线旋转。如下图：
旋转动画
//设置界面
func settingUI(){
let screenWidth = CGRectGetWidth( UIScreen.mainScreen().bounds)
layer1.backgroundColor = UIColor.redColor().CGColor
layer1.frame = CGRect(x: (screenWidth - 8)/2.0, y: 100, width: 8, height: 8)
layer1.cornerRadius = 4
view.layer.addSublayer(layer1)
layer2.backgroundColor = UIColor.redColor().CGColor
layer2.frame = CGRect(x: (screenWidth - 8)/2.0, y: 120, width: 8, height: 8)
layer2.cornerRadius = 4
view.layer.addSublayer(layer2)
layer3.backgroundColor = UIColor.redColor().CGColor
layer3.frame = CGRect(x: (screenWidth - 8)/2.0, y: 140, width: 8, height: 8)
layer3.cornerRadius = 4
view.layer.addSublayer(layer3)
}
@IBAction func startAnimation(sender: AnyObject) {
let screenWidth = CGRectGetWidth(UIScreen.mainScreen().bounds)
CGPoint(x:(screenWidth - 8)/2.0 + 4, y: 124.0)
var animation1 = CAKeyframeAnimation(keyPath: "position")
animation1.delegate = self
animation1.duration = CFTimeInterval(0.3)
animation1.path = UIBezierPath(arcCenter: CGPoint(x:(screenWidth - 8)/2.0 + 4, y: 124.0),radius: CGFloat(58), startAngle:CGFloat(-M_PI_2), endAngle: CGFloat(0), clockwise: true).CGPath
animation1.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
layer1.addAnimation(animation1, forKey: "groupAnimation")
CATransaction.begin()
CATransaction.setDisableActions(true)
layer1.position = CGPoint(x: (screenWidth - 8)/2.0 + 58 + 4, y: 124)
CATransaction.commit()
var animation3 = CAKeyframeAnimation(keyPath: "position")
animation3.delegate = self
animation3.duration = CFTimeInterval(0.3)
animation3.path = UIBezierPath(arcCenter: CGPoint(x:(screenWidth - 8)/2.0 + 4, y: 124.0),radius: CGFloat(58), startAngle:CGFloat(M_PI_2), endAngle: CGFloat(M_PI), clockwise: true).CGPath
animation3.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
layer3.addAnimation(animation3, forKey: "groupAnimation")
CATransaction.begin()
CATransaction.setDisableActions(true)
layer3.position = CGPoint(x: (screenWidth - 8)/2.0 - 58 + 4, y: 124)
CATransaction.commit()
}
2.按顺序放大、改变颜色动画
有三个Layer，第一个Layer动画（放大、改变颜色）结束后（使用animationDidStop协议方法），开始第二个动画然后依次类推。如下图：
按顺序放大、改变颜色动画
var circleShapeLayer1 = CAShapeLayer()
var circleShapeLayer2 = CAShapeLayer()
var circleShapeLayer3 = CAShapeLayer()
/**
设置界面
*/
func settingUI(){
var shapeWidth:CGFloat = 10
let bezierCGPath = UIBezierPath(ovalInRect: CGRect(x: 0, y: 0, width: shapeWidth, height: shapeWidth)).CGPath
let fillCGColor = UIColor(red: 200/255.0, green: 200/255.0, blue: 200/255.0, alpha: 1.0).CGColor
let screenWidth = CGRectGetWidth(UIScreen.mainScreen().bounds)
var marginLeft = CGFloat((screenWidth - 70)/2.0)
circleShapeLayer1.path = bezierCGPath
circleShapeLayer1.fillColor = fillCGColor
circleShapeLayer1.frame = CGRect(x: marginLeft, y: 100, width: shapeWidth, height: shapeWidth)
view.layer.addSublayer(circleShapeLayer1)
circleShapeLayer2.path = bezierCGPath
circleShapeLayer2.fillColor = fillCGColor
circleShapeLayer2.frame = CGRect(x: marginLeft + 30, y: 100, width: shapeWidth, height: shapeWidth)
view.layer.addSublayer(circleShapeLayer2)
circleShapeLayer3.path = bezierCGPath
circleShapeLayer3.fillColor = fillCGColor
circleShapeLayer3.frame = CGRect(x: marginLeft + 60, y: 100, width: shapeWidth, height: shapeWidth)
view.layer.addSublayer(circleShapeLayer3)
}
/**
添加图层动画
:param: layer 图层
:param: layerTagStr 图层Tag
*/
func addLayerAnimation(layer: CAShapeLayer,layerTagStr: String){
var scaleKeyframeAnimation = CAKeyframeAnimation(keyPath: "transform")
var t1 = CATransform3DMakeScale(1.0, 1.0, 0)
var t2 = CATransform3DMakeScale(1.5, 1.5, 0)
var t3 = CATransform3DMakeScale(1.0, 1.0, 0)
scaleKeyframeAnimation.values = [NSValue(CATransform3D:t1),NSValue(CATransform3D:t2),NSValue(CATransform3D:t3)]
scaleKeyframeAnimation.keyTimes = [0,0.5,1]
let normalCGColor = UIColor(red: 200/255.0, green: 200/255.0, blue: 200/255.0, alpha: 1.0).CGColor
var highlightedColor = UIColor(red: 60/255.0, green: 60/255.0, blue: 60/255.0, alpha: 1.0).CGColor
var colorKeyframeAnimation = CAKeyframeAnimation(keyPath: "fillColor")
colorKeyframeAnimation.values = [normalCGColor,highlightedColor,normalCGColor]
colorKeyframeAnimation.keyTimes = [0,0.5,1]
var groupAnimation = CAAnimationGroup()
groupAnimation.duration = CFTimeInterval(0.35)
groupAnimation.animations = [scaleKeyframeAnimation,colorKeyframeAnimation]
groupAnimation.removedOnCompletion = true
groupAnimation.setValue(layerTagStr, forKey: "LayerTag")
groupAnimation.delegate = self
layer.addAnimation(groupAnimation, forKey: "scaleKeyframeAnimation")
}
//开始动画
@IBAction func startAnimationButtonClicked(sender: AnyObject) {
addLayerAnimation(circleShapeLayer1,layerTagStr: "1")
}
//动画结束协议
override func animationDidStop(anim: CAAnimation!, finished flag: Bool) {
var layerTagStr = anim.valueForKey("LayerTag") as! String
if layerTagStr == "1"{
addLayerAnimation(circleShapeLayer2,layerTagStr: "2")
}else if layerTagStr == "2"{
addLayerAnimation(circleShapeLayer3,layerTagStr: "3")
}else if layerTagStr == "3"{
addLayerAnimation(circleShapeLayer1,layerTagStr: "1")
}
}
代码已传至GitHub：https://github.com/iYiming/YMRefreshView
