實(shí)現(xiàn)的效果如下：
實(shí)現(xiàn)效果
下拉刷新原理
其實(shí)原理很簡單：
0.UIScrollView的contentInset屬性：用于保持停留
1.UIScrollView的contentOffset屬性：獲取偏移量，用于控制相應(yīng)偏移量下，刷新視圖如何改變
怎樣方便重用
如何獲取偏移量？
有兩種方式可以獲得:
0.在含有UIScrollView（及其子類）控制器里面使用UIScrollViewDelegate，從而獲取偏移量。
1.使用強(qiáng)大的KVO啊，通過監(jiān)聽contentOffset，很容易的就得到了偏移量。
但是如果要在多個(gè)控制器中使用下拉刷新，那么每個(gè)控制器都實(shí)現(xiàn)UIScrollViewDelegate或KVO，繁瑣且臃腫。
使用UIScrollViewDelegate的方式肯定行不通(通過繼承的方式？？像UITableViewController？我沒有想到好的解決辦法)，因?yàn)槊總€(gè)控制器都要實(shí)現(xiàn)。故UIScrollViewDelegate的方式被pass掉了。
我們繼續(xù)考慮使用KVO，KVO監(jiān)聽的是ScrollView及其子類，如果每個(gè)控制器都寫監(jiān)聽的話也是和UIScrollViewDelegate類似，但是我們可以不寫啊。
滾動(dòng)視圖（UIScrollView及其子類）和下拉刷新視圖是一塊的，有刷新的地方就有下拉刷新視圖。我們把下拉刷新視圖添加在滾動(dòng)視圖上（UIScrollView及其子類），獲得到刷新視圖就可以獲得滾動(dòng)視圖啦。這樣我們把監(jiān)聽寫在刷新視圖里，就不用到處寫了。
還有個(gè)問題，我們?nèi)绾谓o滾動(dòng)視圖添加下拉刷新視圖呢？有沒有簡單的方式給滾動(dòng)視圖添加下拉刷新視圖。我們可以使用擴(kuò)展，添加一個(gè)下拉刷新視圖屬性，只要我們給這個(gè)下拉刷新視圖賦值，我們就把他添加到滾動(dòng)視圖上。這樣就很簡潔啦。
其實(shí)上面的這些東西是我讀MJRefresh代碼發(fā)現(xiàn)的，受益匪淺。
實(shí)現(xiàn)效果中的三個(gè)動(dòng)畫
動(dòng)畫是這個(gè)下拉刷新最大的亮點(diǎn)，也是它吸引我，我才決定仿這么一個(gè)動(dòng)畫(仿的是RSS閱讀器Unread)。
0.展開、關(guān)閉動(dòng)畫
原先是使用POP實(shí)現(xiàn)的，這次使用多次動(dòng)畫的方式。代碼如下，
/**
展開動(dòng)畫
:param: animationLayer 動(dòng)畫Layer
*/
func spreadLayerAnimation(animationLayer: CAShapeLayer){
layerWidthAnimation(animationLayer, width: 100, animationTypeStr: "Spread", animationIndexStr: "1")
}
/**
關(guān)閉動(dòng)畫
:param: animationLayer 關(guān)閉Layer
*/
func closeLayerAnimation(animationLayer: CAShapeLayer){
layerWidthAnimation(animationLayer, width: 0, animationTypeStr: "Close", animationIndexStr: "1")
}
/**
寬度動(dòng)畫
:param: animationLayer 動(dòng)畫層
:param: width 寬度
:param: animationTypeStr 動(dòng)畫類型 展開或關(guān)閉
:param: animationIndexStr 動(dòng)畫索引
*/
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 動(dòng)畫結(jié)束
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.旋轉(zhuǎn)動(dòng)畫
其實(shí)就是沿著一定的路徑進(jìn)行旋轉(zhuǎn)，使用CAKeyframeAnimation的path屬性按照響應(yīng)的貝塞爾曲線旋轉(zhuǎn)。如下圖：
旋轉(zhuǎn)動(dòng)畫
//設(shè)置界面
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.按順序放大、改變顏色動(dòng)畫
有三個(gè)Layer，第一個(gè)Layer動(dòng)畫（放大、改變顏色）結(jié)束后（使用animationDidStop協(xié)議方法），開始第二個(gè)動(dòng)畫然后依次類推。如下圖：
按順序放大、改變顏色動(dòng)畫
var circleShapeLayer1 = CAShapeLayer()
var circleShapeLayer2 = CAShapeLayer()
var circleShapeLayer3 = CAShapeLayer()
/**
設(shè)置界面
*/
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)
}
/**
添加圖層動(dòng)畫
: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")
}
//開始動(dòng)畫
@IBAction func startAnimationButtonClicked(sender: AnyObject) {
addLayerAnimation(circleShapeLayer1,layerTagStr: "1")
}
//動(dòng)畫結(jié)束協(xié)議
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
