仿写 RSS 阅读器 Unread 下拉刷新

实现的效果如下：

下拉刷新原理

• UIScrollView 的 contentInset 属性用于保持停留
• UIScrollView 的 contentOffset 属性获取偏移量。从而设置刷新动画状态

怎样方便重用

如何获取偏移量？

有两种方式可以获得:

1. 在含有 UIScrollView（及其子类）控制器里面使用UIScrollViewDelegate，从而获取偏移量。

2. 使用 KVO，通过监听 contentOffset，很容易的就得到了偏移量。

但是如果要在多个控制器中使用下拉刷新，那么每个控制器都实现UIScrollViewDelegate 或 KVO，繁琐且臃肿。

滚动视图（UIScrollView 及其子类）和下拉刷新视图是一起的，有下拉刷新的地方就有滚动视图。把下拉刷新视图添加在滚动视图上（UIScrollView及其子类），得到刷新视图就可以获得滚动视图。因此把监听写在刷新视图里，就不用到处写了。

还有个问题，我们如何给滚动视图添加下拉刷新视图呢？有没有简单的方式给滚动视图添加下拉刷新视图。我们可以使用分类，添加一个下拉刷新视图属性，只要我们给这个下拉刷新视图赋值，我们就把它添加到滚动视图上。

实现效果中的 3 个动画

展开、关闭动画

原先是使用 POP 实现的，这次使用多次动画的方式。代码如下，

/**
 展开动画
 
 :param: animationLayer 动画Layer
 */
func spreadLayerAnimation(animationLayer: CALayer){
    layerWidthAnimation(animationLayer, width: 100, animationTypeStr: "Spread", animationIndexStr: "1")
}

/**
 关闭动画
 
 :param: animationLayer 关闭Layer
 */
func closeLayerAnimation(animationLayer: CALayer){
    layerWidthAnimation(animationLayer, width: 0, animationTypeStr: "Close", animationIndexStr: "1")
}

/**
 宽度动画
 
 :param: animationLayer    动画层
 :param: width             宽度
 :param: animationTypeStr  动画类型 展开 或 关闭
 :param: animationIndexStr 动画索引
 */
func layerWidthAnimation(animationLayer: CALayer,width: CGFloat,animationTypeStr: String,animationIndexStr: String){
    let screenWidth = CGRectGetWidth(UIScreen.mainScreen().bounds)
    
    let animation = CABasicAnimation(keyPath: "bounds.size.width")
    animation.duration = 0.13
    animation.delegate = self
    animation.toValue = NSNumber(float: 20)
    animation.setValue(animationLayer, 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)
}

// 动画结束
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
    let animationLayer = anim.valueForKey("AnimationLayer") as! CALayer
    let animationTypeStr = anim.valueForKey("AnimationType") as! String
    let animationIndexStr = anim.valueForKey("AnimationIndex") as! String

    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(animationLayer, width: width, animationTypeStr: animationTypeStr, animationIndexStr:String(Int(animationIndexStr)! + 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)
    
    let 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: "rotationAnimation")
    CATransaction.begin()
    CATransaction.setDisableActions(true)
    layer1.position = CGPoint(x: (screenWidth - 8)/2.0 + 58 + 4, y: 124)
    CATransaction.commit()
    
    let 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: "rotationAnimation")
    CATransaction.begin()
    CATransaction.setDisableActions(true)
    layer3.position = CGPoint(x: (screenWidth - 8)/2.0 - 58 + 4, y: 124)
    CATransaction.commit()
}

按顺序放大、改变颜色动画

有三个 Layer，第一个 Layer 动画（放大、改变颜色）结束后（使用 animationDidStop协议方法），开始第二个动画然后依次类推。如下图：

var circleShapeLayer1 = CAShapeLayer()
var circleShapeLayer2 = CAShapeLayer()
var circleShapeLayer3 = CAShapeLayer()

/**
 设置界面
 */
func settingUI() {
    let 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)
    let 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)
}

//开始动画
@IBAction func startAnimationButtonClicked(sender: AnyObject) {
    addLayerAnimation(circleShapeLayer1,layerTagStr: "1")
}

/**
 添加图层动画
 
 :param: layer       图层
 :param: layerTagStr 图层 Tag
 */
func addLayerAnimation(layer: CAShapeLayer,layerTagStr: String) {
    let scaleKeyframeAnimation = CAKeyframeAnimation(keyPath: "transform")
    
    let t1 = CATransform3DMakeScale(1.0, 1.0, 0)
    let t2 = CATransform3DMakeScale(1.5, 1.5, 0)
    let 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
    let highlightedColor = UIColor(red: 60/255.0, green: 60/255.0, blue: 60/255.0, alpha: 1.0).CGColor
    let colorKeyframeAnimation = CAKeyframeAnimation(keyPath: "fillColor")
    colorKeyframeAnimation.values = [normalCGColor,highlightedColor,normalCGColor]
    colorKeyframeAnimation.keyTimes = [0, 0.5, 1]
    
    let 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")
}

// 动画结束协议
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
    let  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