iOS high-quality animation implementation solution - Lottie

I really think that Lottie is a very good and practical animation development library, not only for iOS and android native developers, it makes the realization of complex animations almost cost-free, for designers, what it sees is what you get, not only The advantages of exporting frame images are also very obvious. This blog mainly takes the iOS platform as an example to briefly introduce and summarize the use of the Lottie animation library.

A few useful links

Lottie official website: https://airbnb.design/lottie/ .

LottieFiles：https://www.lottiefiles.com/。

LottieFiles is an online testing Lottie animation website, and it also provides many commonly used Lottie animation components.

2. A Simple Small Demo

Let's look at a simple example first. I found a JSON file of riding animation on LottieFiles. The download address of this file is as follows:

https://www.lottiefiles.com/download/1385

This is a relatively cool riding animation. Just imagine, if you use GIF or frame animation to achieve, the size of the material may be much more than 136k. Add the downloaded JSON file to the iOS project, and then use it just like an image. The code is as follows:

#import <Lottie/Lottie.h>
@interface ViewController ()

@property(nonatomic,strong)LOTAnimationView * animationView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.animationView = [LOTAnimationView animationNamed:@"go.json"];
    [self.view addSubview:self.animationView];
    self.animationView.frame = CGRectMake(20, 30, 280, 200);
    self.animationView.loopAnimation = YES;
    [self.animationView play];
}

@end

The animation effect is as follows:

Both in terms of smoothness and performance, animation effects are much better than GIF images.

Third, the application analysis of the Lottie library

First of all, the LOTAnimationView class is a view class that displays Lottie animations. From the source code, it is inherited from LOTView. Don't panic, this LOTView is not a strange class. It is actually an alias for UIView or NSView for code unification. If you drag the animation directly under the main project, you can directly use the animation JSON file name to create the animation, as follows:

//直接从mainBundle中加载素材
+ (nonnull instancetype)animationNamed:(nonnull NSString *)animationName NS_SWIFT_NAME(init(name:));

You can also load JSON files from a custom Bundle or use other methods:

//从自定义的Bundle加载动画
+ (nonnull instancetype)animationNamed:(nonnull NSString *)animationName inBundle:(nonnull NSBundle *)bundle NS_SWIFT_NAME(init(name:bundle:));
//直接从JSON字典加载动画
+ (nonnull instancetype)animationFromJSON:(nonnull NSDictionary *)animationJSON NS_SWIFT_NAME(init(json:));
//直接通过JSON文件加载动画
+ (nonnull instancetype)animationWithFilePath:(nonnull NSString *)filePath NS_SWIFT_NAME(init(filePath:));
+ (nonnull instancetype)animationFromJSON:(nullable NSDictionary *)animationJSON inBundle:(nullable NSBundle *)bundle NS_SWIFT_NAME(init(json:bundle:));
//从URL加载
- (nonnull instancetype)initWithContentsOfURL:(nonnull NSURL *)url;

In fact, no matter which way the animation is loaded above, it is instantiated through the LOTComposition component class, and you can also build the animation view directly through this class:

//常用的构造方法
+ (nullable instancetype)animationNamed:(nonnull NSString *)animationName NS_SWIFT_NAME(init(name:));
+ (nullable instancetype)animationNamed:(nonnull NSString *)animationName
                              inBundle:(nonnull NSBundle *)bundle NS_SWIFT_NAME(init(name:bundle:));
+ (nullable instancetype)animationWithFilePath:(nonnull NSString *)filePath NS_SWIFT_NAME(init(filePath:));
+ (nonnull instancetype)animationFromJSON:(nonnull NSDictionary *)animationJSON NS_SWIFT_NAME(init(json:));
+ (nonnull instancetype)animationFromJSON:(nullable NSDictionary *)animationJSON
                                 inBundle:(nullable NSBundle *)bundle NS_SWIFT_NAME(init(json:bundle:));
- (instancetype _Nonnull)initWithJSON:(NSDictionary * _Nullable)jsonDictionary
                      withAssetBundle:(NSBundle * _Nullable)bundle;

The information contained in the JSON file is very rich and will be mapped with the LOTComposition instance, such as animation duration, start and end frames, width and height dimensions, etc.

After constructing the LOTAnimationView instance, you need to call the method to play the animation. The common properties and methods in LOTAnimationView are listed below:

//获取动画是否正在播放
@property (nonatomic, readonly) BOOL isAnimationPlaying;
//设置动画是否循环播放
@property (nonatomic, assign) BOOL loopAnimation;
//设置动画是否自动逆序播放
@property (nonatomic, assign) BOOL autoReverseAnimation;
//设置是否缓存
@property (nonatomic, assign) BOOL cacheEnable;
//动画完成的回调block
@property (nonatomic, copy, nullable) LOTAnimationCompletionBlock completionBlock;
//组件实例
@property (nonatomic, strong, nullable) LOTComposition *sceneModel;
//从指定的进度位置播放动画
- (void)playToProgress:(CGFloat)toProgress
        withCompletion:(nullable LOTAnimationCompletionBlock)completion;
//播放指定区间内的动画
- (void)playFromProgress:(CGFloat)fromStartProgress
              toProgress:(CGFloat)toEndProgress
          withCompletion:(nullable LOTAnimationCompletionBlock)completion;
//播放到动画的某一帧
- (void)playToFrame:(nonnull NSNumber *)toFrame
     withCompletion:(nullable LOTAnimationCompletionBlock)completion;
//播放指定帧区间内的动画
- (void)playFromFrame:(nonnull NSNumber *)fromStartFrame
              toFrame:(nonnull NSNumber *)toEndFrame
       withCompletion:(nullable LOTAnimationCompletionBlock)completion;
//播放动画 可以设置回调
- (void)playWithCompletion:(nullable LOTAnimationCompletionBlock)completion;
//直接播放动画
- (void)play;
//暂停播放
- (void)pause;
//停止播放
- (void)stop;
//设置当前帧
- (void)setProgressWithFrame:(nonnull NSNumber *)currentFrame;
//设置某一帧对应的动画属性值
- (void)setValue:(nonnull id)value
      forKeypath:(nonnull NSString *)keypath
         atFrame:(nullable NSNumber *)frame;