利用MJRefresh自定义刷新动画

在一些主流的app中，我们经常可以看到各式各样独特的刷新动画。这些刷新动画独特新颖，能够很好的契合app的内容，抓住用户的眼球。本文就讲用一个简单的例子介绍下使用MJRefresh来自定义刷新动画。先看下效果。

GaugeBoard.gif

这个刷新动画就是模拟一个汽车仪表盘指针转动的效果。制作主要分为两步，动画效果的完成和MJRefresh集成动画。

一：动画效果制作

这个动画制作用到的素材是两张图片，一张是背景图仪表盘(gaugeView)，另外一张图是红色的指针(pointView)。首先让两张图片的中心位于同一个点。
pointView.center = gaugeView.center
然后通过设置pointView的transform属性，让其先逆时针偏移60度。完成之后再顺时针偏移60度(相对于pointView的起始位置)。这样整个动画效果就完成了。

    func startAnimation()  {
        if self.stop {
            return
        }
        UIView.animate(withDuration: 0.4, animations: {
            let transform = CGAffineTransform.init(rotationAngle: CGFloat(M_PI / 3))
            self.pointView.transform = transform
        }, completion: {(complete: Bool) in
            if complete {
               self.oppisoteDirection()
            }
        })
    }

    func oppisoteDirection()  {
        if self.stop {
            return
        }
        UIView.animate(withDuration: 0.4, animations: {
            let transform = CGAffineTransform.init(rotationAngle: CGFloat(-(M_PI / 3)))
            self.pointView.transform = transform
        }, completion: {(complete: Bool) in
            if complete {
                self.startAnimation()
            }
        })
    }
    
    func stopAnimation()  {
        UIView.animate(withDuration: 0.4, animations: {
            self.stop = true
            let transform = CGAffineTransform.init(rotationAngle: 0)
            self.pointView.transform = transform
        })
    }

二：MJRefresh集成动画

首先定义一个MJRefreshHeader的子类GaugeBoardRefreshHeader,在子类中重新定义不同state状态下执行的事件。

override func prepare() {
        super.prepare()
        mj_h = gaugeView.size.height + 30  //下拉之后视图的高度
    }
    
    override func placeSubviews() {
        super.placeSubviews()
    
        gaugeView.center.y = 40
        gaugeView.center.x = self.center.x
        pointView.center = gaugeView.center
        
        self.addSubview(gaugeView)
        self.addSubview(pointView)
    }
    
    override var state: MJRefreshState {
        didSet {
            if state == .idle {
                self.stopAnimation()
            }
            if state == .pulling {
                self.prepareAnimation()
            }
            if state == .refreshing {
                stop = false
                self.startAnimation()
            }
        }
    }

这样一个新的header就完成了。要定义其他各式各样的header也都是同样的做法。先完成要展示的动画内容，然后在定义MJRefreshHeader子类的时候设置好视图的大小，以及不同状态(state)下执行的动画就好。