iOS中Lottie动画使用

APP中的交互动画对整个APP来说是十分重要的。对用户来说，使用一款APP可能并不是这个APP界面做的绚丽，动画做的美之类的原因。纵然如此，一款APP只有动画优美，界面上做好了，才会吸引到用户，用户才会来使用这个APP。对于一些简单的动画我们开发者可以使用系统提供的一些方法来实现，但是在实际开发中，也会遇到一些系统提供的动画难以实现的效果，此处给诸位推荐一个第三方动画库Lottie。

1、为什么用Lottie

（1）、Lottie是专门为移动开发设计的一个第三方库，目前支持Android、iOS 、Web、React Native等平台；

（2）、Lottie的使用非常简单，直接读取资源文件或者读取服务器资源链接即可；

（3）、开发者可以轻松控制动画（播放进度、播放帧数等）；

2、Lottie目前存在的问题

（1）、我个人使用中发现非常消耗手机内存和CPU使用率，尤其是渲染的面积越大这个问题越明显；

下面在iPhone 7来做个测试，播放如下图动画

Lottie动画，由于`MP4`转`Gif`时有掉帧情况，所以看起来不是很流畅

请看两张对比图，

没有加载Lottie动画
开启动画Lottie动画
我在APP中开启这段动画时，手机CPU使用率和内存瞬间增长，个人觉得可能由于动画需要实时渲染，所以动画面积越大，对手机资源消耗就越大。

针对这种情况，个人建议如果不是常驻的动画，在使用完后立即移除，而不是hidden,

#import "Lottie.h"

@property (strong, nonatomic)  LOTAnimationView *testAnimation;

-(LOTAnimationView *)testAnimation{
    if(_testAnimation == nil) {
        _testAnimation = [LOTAnimationView animationNamed:@"test"];
        [self.view addSubview:_testAnimation];
        [_testAnimation setContentMode:UIViewContentModeScaleToFill];
        [_testAnimation mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(self.view);
            make.size.mas_equalTo(CGSizeMake(50, 50));
            make.bottom.equalTo(self.view.mas_bottomMargin).with.offset(-20);
        }];
    }
    return _testAnimation;
}

__weak typeof (self) weakSelf = self;
[self.testAnimation playWithCompletion:^(BOOL animationFinished) {
    [weakSelf  removetestAnimation];
}];

-(void)removetestAnimation{
    if(_testAnimation){
        [_testAnimation removeFromSuperview];
        _testAnimation = nil;
    }
}

（2）、对开发者来说，不能用代码直接修改或控制动画某个属性。

如下图所示，如果需求变了，要第二张图显示的来播放，此时我不能做任何修改，只能找设计师重新为我做一个动画文件。

需求又双叒叕变了

3、Lottie 的使用

1、 导入工程

官方推荐iOS开发者使用Pod来管理,其他平台开发者可参考Lottie官网给出的方案。
在Podfile文件中导入：

pod 'lottie-ios'

cd到工程目录下执行安装命令即可：

pod install

2、 初始化一个动画

在需要的Lottie动画的类引入头文件，

#import "Lottie.h"

//加载本地资源
 LOTAnimationView *lottieAnimationView = [LOTAnimationView animationNamed:@"Animation"];
//加载服务器资源
//LOTAnimationView *lottieAnimationView = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
    [self.view addSubview:lottieAnimationView];
    [lottieAnimationView setContentMode:UIViewContentModeScaleAspectFill];
    [lottieAnimationView mas_makeConstraints:^(MASConstraintMaker *make) {
        //
        make.edges.equalTo(weakSelf.view).with.insets(UIEdgeInsetsMake(0, 0, 0, 0));
    }];

3、动画的播放和控制

运行代码，此时动画只停在第一帧，因为并没有让动画执行，执行播放：

 [lottieAnimationView play];

如果在动画执行完 还有其他的逻辑，可使用:

[lottieAnimationView playWithCompletion:^(BOOL animationFinished) {
       //执行完了
      printf("其他相关业务");
    }];

如果需要这个动画循环播放：

    [lottieAnimationView setLoopAnimation:true];

同时可以控制帧数来实现顺序播放或者逆序播放：

//顺序播放
[lottieAnimationView playFromFrame:[NSNumber numberWithInt:0] toFrame:[NSNumber numberWithInt:15] withCompletion:^(BOOL animationFinished) {
        
    }];
//逆序播放
[lottieAnimationView playFromFrame:[NSNumber numberWithInt:15] toFrame:[NSNumber numberWithInt:0] withCompletion:^(BOOL animationFinished) {
        
    }];

在使用Lottie动画时，由于程序业务关系，我们需要在这段动画没有执行完之前就执行下一段动画，此时可直接跳转至某一帧然后继续执行：

[lottieAnimationView setProgressWithFrame:[NSNumber numberWithInteger:20]];
    [lottieAnimationView playFromFrame:[NSNumber numberWithInt:20] toFrame:[NSNumber numberWithInt:30] withCompletion:^(BOOL animationFinished) {
        printf("其他相关业务");
    }];

4、总结

对于程序中比较复杂的动画用iOS系统为开发者提供的API无法实现的，建议使用Lottie动画，对于一些简单的动画，建议使用系统提供的API来实现，可以参考iOS核心动画技巧。
以上是我在使用Lottie时的一些总结，更多使用请参考Github。

---

本文demo:戳这里