iOS开发-Lottie实现下拉刷新动画效果

在开发过程中，有时候需要自定义下拉刷新控件，这里使用Lottie实现下拉刷新动画效果。

一、Lottie

Lottie 是一个应用十分广泛动画库，适用于Android、iOS、Web、ReactNative、Windows的库，它解析了用Bodymovin导出为json的Adobe After Effects动画，并在移动和网络上进行了原生渲染。

Lottie方法方案是由设计师出动画，导出为json，给前端、iOS、Android播放。

在iOS开发中，我们需要使用lottie-ios库，在podfile中引入库

pod ‘lottie-ios’, ‘~> 2.5.3’

可以使用LOTAnimationView来进行动画播放。

二、LOTAnimationView播放动画

比如我们有一个loading_header，如图

使用LOTAnimationView来进行播放动画

- (LOTAnimationView *)animationView {if (!_animationView) {_animationView = [[LOTAnimationView alloc] initWithFrame:CGRectZero];_animationView.backgroundColor = [UIColor clearColor];_animationView.frame = CGRectMake(0.0, 0.0, kAnimationSize, kAnimationSize);_animationView.loopAnimation = YES;[_animationView setAnimationNamed:@"loading_header"];}return _animationView;
}

播放动画

- (void)startAnimation {[self.animationView play];
}

停止动画播放

- (void)stopAnimation {[self.animationView stop];
}

完整代码如下

INRefreshGifLoadingView.h

#import <UIKit/UIKit.h>@interface INRefreshGifLoadingView : UIView- (void)displayIndicator:(CGFloat)precent;- (void)startAnimation;- (void)stopAnimation;@end

INRefreshGifLoadingView.m

#import "INRefreshGifLoadingView.h"
#import <Lottie/Lottie.h>#import "UIColor+Addition.h"
#import "UIImageView+WebCache.h"static CGFloat kAnimationSize = 60.0;@interface INRefreshGifLoadingView ()@property (nonatomic, strong) LOTAnimationView *animationView;@end@implementation INRefreshGifLoadingView- (instancetype)initWithFrame:(CGRect)frame
{self = [super initWithFrame:frame];if (self) {[self addSubview:self.animationView];[self layoutFrame];}return self;
}- (void)layoutFrame {self.animationView.center = self.center;
}#pragma mark - Display
- (void)displayIndicator:(CGFloat)precent {}- (void)startAnimation {[self.animationView play];
}- (void)stopAnimation {[self.animationView stop];
}#pragma mark - SETTER/GETTER
- (LOTAnimationView *)animationView {if (!_animationView) {_animationView = [[LOTAnimationView alloc] initWithFrame:CGRectZero];_animationView.backgroundColor = [UIColor clearColor];_animationView.frame = CGRectMake(0.0, 0.0, kAnimationSize, kAnimationSize);_animationView.loopAnimation = YES;[_animationView setAnimationNamed:@"loading_header"];}return _animationView;
}@end

三、使用MJRefresh进行下拉刷新播放

在使用MJRefresh时候，我们继承MJRefreshStateHeader来实现lottie动画播放效果。

根据MJRefreshState来进行控制动画是否播放

完整代码如下

INRefreshHeader.h

#import "MJRefresh.h"
#import "INRefreshGifLoadingView.h"@interface INRefreshHeader : MJRefreshStateHeader@property (nonatomic, assign) BOOL showInsetTop;@property (nonatomic, strong) INRefreshGifLoadingView *gifLoadingView;@end

INRefreshHeader.m

#import "INRefreshHeader.h"@implementation INRefreshHeader- (instancetype)initWithFrame:(CGRect)frame {if (self = [super initWithFrame:frame]) {self.lastUpdatedTimeLabel.hidden = YES;self.stateLabel.hidden = YES;[self addSubview:self.gifLoadingView];}return self;
}- (INRefreshGifLoadingView *)gifLoadingView {if (!_gifLoadingView) {_gifLoadingView = [[INRefreshGifLoadingView alloc] initWithFrame:CGRectMake(0.0, 0.0, CGRectGetWidth([UIScreen mainScreen].bounds), self.bounds.size.height)];}return _gifLoadingView;
}- (void)setState:(MJRefreshState)state {MJRefreshCheckState// 根据状态做事情if (state == MJRefreshStateIdle) {if (oldState == MJRefreshStateRefreshing) {self.gifLoadingView.alpha = 1.0;// 如果执行完动画发现不是idle状态，就直接返回，进入其他状态if (self.state != MJRefreshStateIdle) return;self.gifLoadingView.alpha = 1.0;[self.gifLoadingView stopAnimation];} else {[self.gifLoadingView stopAnimation];}} else if (state == MJRefreshStatePulling) {[self.gifLoadingView stopAnimation];} else if (state == MJRefreshStateRefreshing) {[self.gifLoadingView startAnimation];}
}- (void)prepare {[super prepare];self.mj_h = 70.0;
}- (void)placeSubviews {[super placeSubviews];CGFloat centerX = self.mj_w * 0.5;CGFloat centerY = self.mj_h * 0.5;self.gifLoadingView.center = CGPointMake(centerX, centerY);
}/** 当scrollView的contentOffset发生改变的时候调用 */
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change {[super scrollViewContentOffsetDidChange:change];NSLog(@"change:%@",change);CGPoint old = [change[@"old"] CGPointValue];CGPoint new = [change[@"new"] CGPointValue];CGFloat precent = -new.y/self.mj_h;[self.gifLoadingView displayIndicator:precent];
}/** 当scrollView的contentSize发生改变的时候调用 */
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change {[super scrollViewContentSizeDidChange:change];
}/** 当scrollView的拖拽状态发生改变的时候调用 */
- (void)scrollViewPanStateDidChange:(NSDictionary *)change {[super scrollViewPanStateDidChange:change];
}- (void)setShowInsetTop:(BOOL)showInsetTop {_showInsetTop = showInsetTop;}- (void)backInitState {}@end

四、在TableView使用Refresh

在设置UITableView 的mj_header，来进行使用下拉刷新动画效果。

- (void)configureRefresh {__weak typeof(self) weakSelf = self;INRefreshHeader *header = [INRefreshHeader headerWithRefreshingBlock:^{[weakSelf refreshData];}];self.noteView.tableView.mj_header = header;
}- (void)refreshData {dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(5.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{[self.noteView.tableView.mj_header endRefreshing];});
}- (void)loadMoreData {dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{[self.noteView.tableView.mj_header endRefreshing];});
}

Lottie实现下拉刷新动画效果如下

五、小结

iOS开发-Lottie实现下拉刷新动画效果

学习记录，每天不停进步。