iOS development-Lottie implements pull-down refresh animation effect

iOS development-Lottie implements pull-down refresh animation effect

During the development process, sometimes you need to customize the pull-down refresh control. Here, Lottie is used to implement the pull-down refresh animation effect.

1. Lottie

Lottie is a widely used animation library, suitable for Android, iOS, Web, ReactNative, and Windows. It parses Adobe After Effects animations exported to json using Bodymovin, and performs native rendering on mobile and web.

Lottie's method solution is for the designer to create animations, export them as json, and play them on the front end, iOS, and Android.

In iOS development, we need to use lottie-ios library and introduce the library in podfile

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

You can use LOTAnimationView for animation playback.

2. LOTAnimationView plays animation

For example, we have a loading_header, as shown in the figure

Use LOTAnimationView to play animations

- (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;
}

Play animation

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

Stop animation playback

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

The complete code is as follows

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

3. Use MJRefresh for pull-down refresh playback

When using MJRefresh, we inherit MJRefreshStateHeader to achieve the lottie animation playback effect.

Control whether the animation is played according to MJRefreshState

The complete code is as follows

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

4. Use Refresh in TableView

Set the mj_header of UITableView to use the pull-down refresh animation effect.

- (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 implements the pull-down refresh animation effect as follows

5. Summary

iOS development-Lottie implements pull-down refresh animation effect

Study and record, keep improving every day.