Lottie动画（iOS）

lottie动画是一个AE制作的动画，多个平台可使用，iOS，Android，web，React Native，Windows，动画内容可以随意通过AE更改，内容多样化，多平台样式统一化，但代码可塑性就并不强，也正因如此，使用较为方便。

你可以打开官网进行阅读，http://airbnb.io/lottie/相关文档。

lottie的集成

官方支持使用cocopods。

pod 'lottie-ios'
pod install

使用的时候引入头文件#import <lottie/Lottie.h>即可
官方文档默认是swift语言，如果使用swift语言开发，可以直接阅读官方文档，这里介绍OC。

lottie的使用

定义属性

@property (nonatomic , strong)LOTAnimationView *animation;
@property (nonatomic , strong)UIView * bgview;

加载动画json数据，如果你不知道这里的json怎么来，打开lottie的资源网站你就懂了。https://lottiefiles.com/。选择一个动画下载下来。拉进工程。

self.animation = [LOTAnimationView animationNamed:@"funky_chicken" inBundle:[NSBundle mainBundle]];
self.bgview = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 400)];
    self.bgview.center = self.view.center;
[self.view addSubview:self.bgview];
//这里使用是masonry布局，这个布局方式不固定，自己开心就好。
[self.animation setContentMode:UIViewContentModeScaleAspectFit];
[self.animation mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.left.top.right.mas_equalTo(0);
    }];

// __weak typeof(self) weakself = self;
[self.animation playWithCompletion:^(BOOL animationFinished) {
      
 }];

这样一个简单的动画就完成了。

小鸡.gif

这里可以使用递归的方式，可以让动画一直延续下去或者使用loopAnimation = YES方式无限循环。
除了加载本地项目的json资源，还可以使用webURL

self.animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:@"https://assets9.lottiefiles.com/packages/lf20_NI3Uye.json"]];

口红.gif

当然还有其他的加载方式。可自行体验

 [LOTAnimationView animationNamed:@""];
 [LOTAnimationView animationWithFilePath:@""];
 [LOTAnimationView animationFromJSON:nil];
 [LOTAnimationView animationFromJSON:nil inBundle:[NSBundle mainBundle]];

除此之外还有一个重要的东西就是帧速率问题

    self.animation.animationSpeed = 0.5;

口红慢.gif

播放与暂停

play的几种方式

 [self.animation play]; //普通的播放方式
 [self.animation playWithCompletion:^(BOOL animationFinished) {
        
    }];//播放结束后带回调

调整播放进度

self.animation.loopAnimation = NO;
[self.animation playToProgress:0.7 withCompletion:^(BOOL animationFinished) {
//只播放0-0.7之间动画，完整动画为1.0
 }];
    [self.animation playFromProgress:0.5 toProgress:1.0 withCompletion:^(BOOL animationFinished) {
 //只播放0.5-1之间动画，开始动画为0
    }];

调整帧,这个需要知道动画帧数，否则不好把握。

self.animation.loopAnimation = NO;
[self.animation playFromFrame:@5 toFrame:@20 withCompletion:^(BOOL animationFinished) {
        
    }];