iOS自定义MJRefresh上拉和下拉刷新动画

最近利用MJRefresh做了一个下拉刷新和上拉加载的动画，先上效果图：

refresh.gif

基本思路：

• 制作下拉动画时我们只需要在MJRefresh的MJRefreshGifHeader类中添加我们所需要Gif图片，并隐藏掉提示文字即可。
• 制作上拉动画同理，需要在MJRefresh的MJRefreshBackGifFooter类或者MJRefreshAutoGifFooter类中添加我们所需要Gif图片，并隐藏掉提示文字即可。（MJRefreshBackGifFooter和MJRefreshAutoGifFooter的区别是：前者只有上拉才会显示，是默认的上拉控件，而后者则是添加在所需要刷新视图下面，上拉或者点击文字均可触发加载动画）

一、下拉刷新

• 创建一个gif类CustomGifHeader继承自MJRefreshGifHeader。

@interface CustomGifHeader : MJRefreshGifHeader

• 重写父类方法- (void)prepare NS_REQUIRES_SUPER;，在方法中添加gif图片，并设置普通闲置状态MJRefreshStateIdle、即将刷新状态MJRefreshStatePulling和正在刷新状态MJRefreshStateRefreshing下对应加载的gif动画。

#pragma mark - 实现父类的方法
- (void)prepare {
    [super prepare];
    //GIF数据
    NSArray * idleImages = [self getRefreshingImageArrayWithStartIndex:1 endIndex:8];
    NSArray * refreshingImages = [self getRefreshingImageArrayWithStartIndex:1 endIndex:8];
    //普通状态
    [self setImages:idleImages forState:MJRefreshStateIdle];
    //即将刷新状态
    [self setImages:refreshingImages forState:MJRefreshStatePulling];
    //正在刷新状态
    [self setImages:refreshingImages forState:MJRefreshStateRefreshing];
}

#pragma mark - 获取资源图片
- (NSArray *)getRefreshingImageArrayWithStartIndex:(NSInteger)startIndex endIndex:(NSInteger)endIndex {
    NSMutableArray * imageArray = [NSMutableArray array];
    for (NSUInteger i = startIndex; i <= endIndex; i++) {
        UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"Loading_%zd.tiff",i]];
        if (image) {
            [imageArray addObject:image];
        }
    }
    return imageArray;
}

• 重写控制子控件frame方法- (void)placeSubviews NS_REQUIRES_SUPER;隐藏对应的文字显示。

#pragma mark - 实现父类的方法
- (void)placeSubviews {
    [super placeSubviews];
    //隐藏状态显示文字
    self.stateLabel.hidden = YES;
    //隐藏更新时间文字
    self.lastUpdatedTimeLabel.hidden = YES;
}

• 在控制器中创建刷新gifHeader。

- (CustomGifHeader *)gifHeader {
    if (!_gifHeader) {
        _gifHeader = [CustomGifHeader headerWithRefreshingBlock:^{
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                [self.tableView.mj_header endRefreshing];
            });
        }];
    }
    return _gifHeader;
}

• tableView添加刷新gifHeader。

_tableView.mj_header = self.gifHeader;

二、上拉加载

• 创建一个gif类CustomGifFooter继承自MJRefreshBackGifFooter。（这里默认以继承MJRefreshBackGifFooter为例，如果继承自MJRefreshAutoGifFooter，则和该过程类似）

@interface CustomGifFooter : MJRefreshBackGifFooter

• 重写父类方法- (void)prepare NS_REQUIRES_SUPER;（和下拉刷新一样）。
• 重写控制子控件frame方法- (void)placeSubviews NS_REQUIRES_SUPER;隐藏对应的文字显示。

- (void)placeSubviews {
    [super placeSubviews];
    //隐藏状态显示文字
    self.stateLabel.hidden = YES;
}

如果该类继承自MJRefreshAutoGifFooter类，则父类方法- (void)placeSubviews NS_REQUIRES_SUPER;实现如下：

- (void)placeSubviews{
    [super placeSubviews];
    //隐藏状态显示文字
//    self.stateLabel.hidden = YES;
    //隐藏刷新状态的文字
    self.refreshingTitleHidden = YES;
}

• 在控制器中创建刷新gifFooter。

- (CustomGifFooter *)gifFooter {
    if (!_gifFooter) {
        _gifFooter = [CustomGifFooter footerWithRefreshingBlock:^{
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                [self.tableView.mj_footer endRefreshing];
            });
        }];
    }
    return _gifFooter;
}

• tableView添加刷新gifFooter。

_tableView.mj_footer = self.gifFooter;

如果创建的上拉加载gif类继承自MJRefreshAutoGifFooter，则加载效果如下，其中的文字提示可以通过重写父类方法- (void)placeSubviews NS_REQUIRES_SUPER;设置self.stateLabel.hidden = YES;隐藏掉。

refresh.gif
Demo地址：MJRefresh加载动画