iOS-自定义MJRefresh下拉刷新动画

前段时间发现天虹旗下”红领巾”app的下拉刷新动画挺有趣,重新仿写了一个;见动画效果;

---

代码实现如下

MJRefreshGifHeader继承自MJ中的MJRefreshGifHeader#import "MJRefreshGifHeader.h"@interface CustomRefreshGifHeader : MJRefreshGifHeader/** 设置state状态下的动画图片images 动画持续时间duration*/- (void)setImages:(NSArray *)images duration:(NSTimeInterval)duration forState:(MJRefreshState)state;- (void)setImages:(NSArray *)images forState:(MJRefreshState)state;@end

---

#import "CustomRefreshGifHeader.h"#define WIDTH   [UIScreen mainScreen].bounds.size.width@interface CustomRefreshGifHeader()//一直左滑动的动画图片@property (nonatomic, strong) UIView *bgView;//顶部的图片@property (nonatomic, strong) UIImageView *topImage;//自定义的刷新提示状态@property (nonatomic, strong) UILabel *customStatusLable;//跑动的ImageV@property (nonatomic, strong) UIImageView *customImageV;//重写父类@property (strong, nonatomic) NSMutableDictionary *stateImages;//重写父类@property (strong, nonatomic) NSMutableDictionary *stateDurations;@end@implementation CustomRefreshGifHeader#pragma mark - 懒加载- (UIImageView *)topImage {    if (!_topImage) {        [self addSubview:_topImage =[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"顶部图片"]]];        _topImage.frame = CGRectMake(0, -360, WIDTH, 360);        _topImage.contentMode = UIViewContentModeScaleAspectFit;    }    return _topImage;}- (UIView *)bgView {    if (!_bgView) {        [self addSubview:_bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, WIDTH * 2, 60)]];        for (int i = 0; i < 2; i ++) {            UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"refreshbg"]];            image.frame = CGRectMake(WIDTH * i, 0, WIDTH, 60);            image.contentMode = UIViewContentModeScaleAspectFill;            [_bgView addSubview:image];        }    }    return _bgView;}- (UIImageView *)customImageV {    if (!_customImageV ) {        [self addSubview:_customImageV = [[UIImageView alloc] init]];    }    return _customImageV;}- (NSMutableDictionary *)stateImages {    if (!_stateImages) {        self.stateImages = [NSMutableDictionary dictionary];    }    return _stateImages;}- (NSMutableDictionary *)stateDurations {    if (!_stateDurations) {        self.stateDurations = [NSMutableDictionary dictionary];    }    return _stateDurations;}#pragma mark - 公共方法//重写动画实现- (void)setImages:(NSArray *)images duration:(NSTimeInterval)duration forState:(MJRefreshState)state {    if (images == nil) return;    self.stateImages[@(state)] = images;    self.stateDurations[@(state)] = @(duration);    /* 根据图片设置控件的高度 */    UIImage *image = [images firstObject];    if (image.size.height > self.mj_h) {        self.mj_h = image.size.height;    }}- (void)setImages:(NSArray *)images forState:(MJRefreshState)state {    [self setImages:images duration:images.count * 0.1 forState:state];}#pragma mark - 实现父类的方法//初始化操作- (void)prepare {    [super prepare];    self.labelLeftInset = 20;    [self bgView];    [self topImage];    self.lastUpdatedTimeLabel.hidden = YES;    self.gifView.hidden = YES;    self.stateLabel.hidden = YES;    [self bringSubviewToFront:self.customStatusLable];    [self bringSubviewToFront:self.customImageV];}///重写MJ百分比- (void)setPullingPercent:(CGFloat)pullingPercent {    [super setPullingPercent:pullingPercent];    //如果拖动的百分比大于1则显示为1    if (self.scrollView.dragging) {        if (pullingPercent >= 1) {            pullingPercent = 0.9999;        }    }    self.customImageV.frame = CGRectMake(WIDTH * 0.2  * pullingPercent ,  60 * (1 - pullingPercent), 60 * pullingPercent, 60 * pullingPercent);    if (self.bgView.layer.animationKeys.count == 0) {        [self.bgView.layer addAnimation:[self creatAnimation] forKey:@"animation"];    }    NSArray *images = self.stateImages[@(MJRefreshStateIdle)];    if (self.state != MJRefreshStateIdle || images.count == 0) return;    [self.customImageV stopAnimating];    NSUInteger index =  images.count * pullingPercent;    if (index >= images.count) index = images.count - 1;    self.customImageV.image = images[index];    [self layoutSubviews];}//新的动画图片frame不在根据placeSubviews调整, 而是在拖动百分比中设置- (void)placeSubviews {    [super placeSubviews];}- (void)setState:(MJRefreshState)state {    MJRefreshCheckState#pragma mark    无论是状态还是百分比发生变化, 均检测一次是否有动画; 若没有,添加    if (self.bgView.layer.animationKeys.count == 0) {        [self.bgView.layer addAnimation:[self creatAnimation] forKey:@"animation"];    }    //自定义位置的提示刷新状态始终跟父类的保持一致    self.customStatusLable.text = self.stateLabel.text;    if (state == MJRefreshStatePulling || state == MJRefreshStateRefreshing) {        NSArray *images = self.stateImages[@(state)];        if (images.count == 0) return;        [self.customImageV stopAnimating];        if (images.count == 1) { // 单张图片            self.customImageV.image = [images lastObject];        } else { // 多张图片            self.customImageV.animationImages = images;            self.customImageV.animationDuration = [self.stateDurations[@(state)] doubleValue];            [self.customImageV startAnimating];        }    } else if (state == MJRefreshStateIdle) {        [self.customImageV stopAnimating];    }}//主要效果就是实现当刷新状态完成时仍然能够保持动画完成.- (void)endRefreshing {    __weak CustomRefreshGifHeader *weakSelf = self;    [UIView animateWithDuration:1.3f animations:^{        weakSelf.customImageV.frame = CGRectMake(WIDTH + 10, 60 * 0.00001, 60 * 0.9999, 60 * 0.9999);    } completion:^(BOOL finished) {        //向右跑动的动画当跑出屏幕后就置位zero        weakSelf.customImageV.frame = CGRectZero;        dispatch_async(dispatch_get_main_queue(), ^{            weakSelf.state = MJRefreshStateIdle;            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{                [weakSelf.bgView.layer removeAllAnimations];            });        });    }];}#pragma mark    Animation- (CABasicAnimation *)creatAnimation {    self.bgView.layer.anchorPoint = CGPointMake(0, 0);    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];    animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(-WIDTH, 0)];    animation.repeatCount = MAXFLOAT;    animation.duration = 20;    animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionLinear];    animation.removedOnCompletion = NO;    animation.fillMode = kCAFillModeBackwards;    return animation;}- (UILabel *)customStatusLable {    if (!_customStatusLable) {        [self addSubview:_customStatusLable  = [[UILabel alloc] initWithFrame:CGRectMake(0, 40, WIDTH, 20)]];        _customStatusLable.font = [UIFont systemFontOfSize:10];        _customStatusLable.textAlignment = NSTextAlignmentCenter;        _customStatusLable.textColor = [UIColor darkGrayColor];    }    return _customStatusLable;}- (void)dealloc {    NSLog(@"%@------------dealloc", self.class);}@end

---

使用时只需将自定义的类拖进工程即可,跟原本MJ使用方法相同.详见demo

---

Demo地址