MJRefresh
MJRefresh由小碼哥開發，是目前iOS下拉刷新、上拉加載比較火的控件之一，有著超高的人氣。
本文主要介紹基于MJRefresh自定義下拉刷新動畫。
一、MJRefresh架構
MJRefresh架構
1、使用CocoaPods安裝MJRefresh
platform :ios, '7.0'
pod 'MJRefresh', '~> 3.1.12' # 下拉刷新
二、自定義刷新動畫（氣球爆炸??）
1、BallonRefresh架構
BallonRefresh.bundle存放每一幀圖片，命名為balloon_animation_x@2x.png，其中x標識每一幀，一共13幀圖片。
BallonRefreshHeader實現自定義刷新動畫。
2、BallonRefreshHeader.h文件中
需要繼承MJRefreshStateHeader
#import "MJRefreshGifHeader.h"
@interface BalloonRefreshHeader : MJRefreshStateHeader
@end
3、BallonRefreshHeader.m文件中
實現思路：（每一幀動畫時長0.15秒）
（普通狀態）使用1-5幀圖片，用于放大縮小氣球??
（即將刷新、正在刷新狀態）使用6-7幀圖片，用于抖動氣球??
（刷新完成狀態）使用8-13幀圖片，用于爆炸氣球??
具體代碼邏輯如下所示
#import "BalloonRefreshHeader.h"
#define BALLOON_GIF_DURATION 0.15
@interface BalloonRefreshHeader()
@property (strong, nonatomic) UIImageView *stateGIFImageView;
@property (strong, nonatomic) NSMutableDictionary *stateImages;
@end
@implementation BalloonRefreshHeader
#pragma mark - 懶加載
- (UIImageView *)stateGIFImageView{
if (!_stateGIFImageView) {
_stateGIFImageView = [[UIImageView alloc] init];
[self addSubview:_stateGIFImageView];
}
return _stateGIFImageView;
}
- (NSMutableDictionary *)stateImages {
if (!_stateImages) {
self.stateImages = [NSMutableDictionary dictionary];
}
return _stateImages;
}
#pragma mark - 公共方法
- (void)setImages:(NSArray *)images forState:(MJRefreshState)state {
if (images == nil) {
return;
}
self.stateImages[@(state)] = images;
/* 根據圖片設置控件的高度 */
UIImage *image = [images firstObject];
if (image.size.height > self.mj_h) {
self.mj_h = image.size.height;
}
}
#pragma mark - 實現父類的方法
- (void)prepare {
[super prepare];
// 初始化間距
self.labelLeftInset = 20;
// 資源數據（GIF每一幀）
NSArray *idleImages = [self getRefreshingImageArrayWithStartIndex:1 endIndex:5];
NSArray *refreshingImages = [self getRefreshingImageArrayWithStartIndex:6 endIndex:7];
// 普通狀態
[self setImages:idleImages forState:MJRefreshStateIdle];
// 即將刷新狀態
[self setImages:refreshingImages forState:MJRefreshStatePulling];
// 正在刷新狀態
[self setImages:refreshingImages forState:MJRefreshStateRefreshing];
}
- (void)setPullingPercent:(CGFloat)pullingPercent {
[super setPullingPercent:pullingPercent];
NSArray *images = self.stateImages[@(MJRefreshStateIdle)];
if (self.state != MJRefreshStateIdle || images.count == 0) {
return;
}
[self.stateGIFImageView stopAnimating];
NSUInteger index = images.count * pullingPercent;
if (index >= images.count) {
index = images.count - 1;
}
self.stateGIFImageView.image = images[index];
}
- (void)placeSubviews{
[super placeSubviews];
if (self.stateGIFImageView.constraints.count) {
return;
}
self.stateLabel.hidden = YES;
self.lastUpdatedTimeLabel.hidden = YES;
self.stateGIFImageView.frame = self.bounds;
self.stateGIFImageView.contentMode = UIViewContentModeCenter;
}
- (void)setState:(MJRefreshState)state{
MJRefreshCheckState
if (state == MJRefreshStatePulling || state == MJRefreshStateRefreshing) {
NSArray *images = self.stateImages[@(state)];
[self startGIFViewAnimationWithImages:images];
} else if (state == MJRefreshStateIdle) {
if (oldState == MJRefreshStateRefreshing && state == MJRefreshStateIdle) {
NSArray *endImages = [self getRefreshingImageArrayWithStartIndex:8 endIndex:13];
[self startGIFViewAnimationWithImages:endImages];
}else{
[self.stateGIFImageView stopAnimating];
}
}
}
#pragma mark - 開始動畫
- (void)startGIFViewAnimationWithImages:(NSArray *)images{
if (images.count <= 0){
return;
}
[self.stateGIFImageView stopAnimating];
// 單張
if (images.count == 1) {
self.stateGIFImageView.image = [images lastObject];
return;
}
// 多張
self.stateGIFImageView.animationImages = images;
self.stateGIFImageView.animationDuration = images.count * BALLOON_GIF_DURATION;
[self.stateGIFImageView startAnimating];
}
#pragma mark - 獲取資源圖片
- (NSArray *)getRefreshingImageArrayWithStartIndex:(NSInteger)startIndex endIndex:(NSInteger)endIndex{
NSMutableArray *result = [NSMutableArray array];
for (NSUInteger i = startIndex; i <= endIndex; i++) {
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"BalloonRefresh.bundle/balloon_animation_%zd", i]];
if (image) {
[result addObject:image];
}
}
return result;
}
@end
三、如何使用BallonRefreshHeader
1、將BallonRefreshHeader文件夾拖入工程中，代碼如下。
//模擬下拉刷新
BalloonRefreshHeader *header = [BalloonRefreshHeader headerWithRefreshingBlock:^{
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[mainTableView.mj_header endRefreshing];
});
}];
mainTableView.mj_header = header;
四、效果
