Lottie 读取 JSON 文件实现动画

2019年9月25日 209次阅读 来源: 灵机文化

Lottie

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

设计师在 After Effects 设计好相关的动画，然后安装上 BodyMovin 这个插件，这个插件，可以帮导出动画效果的 JSON 文件，然后我们可以通过 Lottie 来加载相关的 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 代码如下:

《Lottie 读取 JSON 文件实现动画》

- (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 转场动画

《Lottie 读取 JSON 文件实现动画》

- (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, 下次进入页面才会有新的动画。

《Lottie 读取 JSON 文件实现动画》

- (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 读取 JSON 文件实现动画》

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

lottie-ios lottie-ios

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

    原文作者：灵机文化
    原文地址: https://segmentfault.com/a/1190000009206865
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞