Lottie 读取 JSON 文件实现动画

Lottie

Lottie 是 Airbnb 开源的一个动画项目，它支持 iOS, mac OS Android RN，因为某些复杂动画的实现，每每会写不少的 code 来实现它，并且调试动画的效果会比较花费时间。用它来解决某些动画会带来很大的便利。

设计师在 After Effects 设计好相关的动画，而后安装上 BodyMovin 这个插件，这个插件，能够帮导出动画效果的 JSON 文件，而后咱们能够经过 Lottie 来加载相关的 JSON 文件来实现动画效果。

优点

• 开发能够方便的实现动画，节约调试动画效果时间等，不用写一大堆 code 去实现动画，只要设计给相关的 JSON 文件就能够了。

• 多个平台能够共用，例如 iOS 和 Android，公用一个动画。

• 能够经过 URL 的方式加载 JSON 文件，来替换客户端动画，不用发版本了

• 设计想了一个屌炸天的动画，而后给到开发，开发说这个实现不了，或者说很费时间，而后让设计用这种方式去实现。

• 对于 iOS 来讲支持 ViewController 转场动画

• iOS 平台上用 Core Animation 作矢量动画。性能不错，并且有缓存

• 对比于用 GIF 动画，手写动画，轻量，性能和存储上都更佳。

不足之处

• iOS 版本要 >= 8.0 才可使用。不支持 7.x

• 对于一些交互性的动画，支持不是很好。主要是对于播放性的动画

• Bodymovin 插件待完善，仍然有部分 AE 效果没法成功导出

• 动画没法被编辑，加载下来是什么样子，就原封不动

基础用法

Demo 里面的素材是来自官网的。把相关动画的 JSON 文件导入工程中。这里咱们拿了 LottieLogo1.json 这个文件。而后用 LOTAnimationView 生成一个动画的 View 代码以下:

- (LOTAnimationView *)logo {
    if (!_logo) {
        // 经过传入相关的 JSON 文件来呈现动画。
        _logo = [LOTAnimationView animationNamed:@"LottieLogo1"];
        // 设置 View 的 contentMode
        _logo.contentMode = UIViewContentModeScaleAspectFill;
    }
    return _logo;
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    // 播放动画
    [self.logo play];
}

而后经过

• [self.logo play] 就能够播放动画

• [self.logo pause] 中止动画，若是调用完这个方法，再调用 play 会接着上次动画中止的地方继续执行

• initWithContentsOfURL 经过传入一个 NSURL 来加载 JSON 动画

• isAnimationPlaying 动画是否正在执行

• loopAnimation 是否循环播放动画

• animationProgress 动画的进度

• animationDuration 动画时长

• self.logo.animationProgress = 0.0f 把动画定位到某一个帧。

• [self.logo playWithCompletion:^(BOOL animationFinished) {}] 设置动画执行完回调

ViewController 转场动画

经过 LOTAnimationTransitionController 来实现 presentViewController 和 dismissViewControllerAnimated 转场动画

- (IBAction)btnTapped {
    BViewController *b = [BViewController new];
    b.transitioningDelegate = self;
    [self presentViewController:b animated:YES completion:nil];
}

#pragma mark - UIViewControllerTransitioningDelegate
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
                                                                  presentingController:(UIViewController *)presenting
                                                                      sourceController:(UIViewController *)source {
    // vcTransition1.json 是一个动画的 json 文件，传参的时候，不用带后缀 .json
    LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
                                                                                                              fromLayerNamed:@"outLayer"
                                                                                                                toLayerNamed:@"inLayer"];
    // 返回一个准守 UIViewControllerAnimatedTransitioning 协议对象
    return animationController;
}


- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
    LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition2"
                                                                                                              fromLayerNamed:@"outLayer"
                                                                                                                toLayerNamed:@"inLayer"];
    return animationController;
}

URL 方式加载

这种方式会有缓存，要 kill 掉 App, 下次进入页面才会有新的动画。

- (LOTAnimationView *)animationView {
    if (!_animationView) {
        NSURL *URL = [NSURL URLWithString:@"http://127.0.0.1:8990/LottieLogo1.json"];
        _animationView = [[LOTAnimationView alloc] initWithContentsOfURL:URL];
        _animationView.contentMode = UIViewContentModeScaleAspectFill;
    }
    return _animationView;
}

其余

lottie Demo 一个输入键盘字母的的动画，里面的实现是定义一个 collectionView，每一个字母实际上是一个 UICollectionViewCell, Cell 里面有个 subView 是 LOTAnimationView。而后有个 UITextField，不过放在屏幕外面看不到。来调起键盘，字母的动画主要靠 LOTAnimationView 实现,而后项目里面要有全部字母的动画 JSON 文件。

lottie Tutorial 视频 设计和开发均可以参考

lottie-ios lottie-ios

LottieFiles 动画资源下载，上面有 json 和 aep 文件能够拿来用