在一些主流的app中宜雀，我們經(jīng)彻谈茫可以看到各式各樣獨(dú)特的刷新動(dòng)畫。這些刷新動(dòng)畫獨(dú)特新穎脆诉，能夠很好的契合app的內(nèi)容甚亭，抓住用戶的眼球。本文就講用一個(gè)簡(jiǎn)單的例子介紹下使用MJRefresh來(lái)自定義刷新動(dòng)畫击胜。先看下效果亏狰。
這個(gè)刷新動(dòng)畫就是模擬一個(gè)汽車儀表盤指針轉(zhuǎn)動(dòng)的效果。制作主要分為兩步偶摔，動(dòng)畫效果的完成和MJRefresh集成動(dòng)畫暇唾。
一：動(dòng)畫效果制作
這個(gè)動(dòng)畫制作用到的素材是兩張圖片，一張是背景圖儀表盤(gaugeView)辰斋，另外一張圖是紅色的指針(pointView)策州。首先讓兩張圖片的中心位于同一個(gè)點(diǎn)。
pointView.center = gaugeView.center
然后通過設(shè)置pointView的transform屬性宫仗，讓其先逆時(shí)針偏移60度够挂。完成之后再順時(shí)針偏移60度(相對(duì)于pointView的起始位置)。這樣整個(gè)動(dòng)畫效果就完成了锰什。
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集成動(dòng)畫
首先定義一個(gè)MJRefreshHeader的子類GaugeBoardRefreshHeader,在子類中重新定義不同state狀態(tài)下執(zhí)行的事件。
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()
}
}
}
這樣一個(gè)新的header就完成了丁逝。要定義其他各式各樣的header也都是同樣的做法汁胆。先完成要展示的動(dòng)畫內(nèi)容，然后在定義MJRefreshHeader子類的時(shí)候設(shè)置好視圖的大小霜幼，以及不同狀態(tài)(state)下執(zhí)行的動(dòng)畫就好嫩码。
