4

Lottie

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

设计师在 After Effects 设计好相关的动画,然后安装上 BodyMovin 这个插件,这个插件,可以帮导出动画效果的 JSON 文件,然后我们可以通过 Lottie 来加载相关的 JSON 文件来实现动画效果。

Paste_Image.png

优势

  • 开发可以方便的实现动画,节约调试动画效果时间等,不用写一大堆 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 代码如下:

2017-04-26 16.08.28.gif

- (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 来实现 presentViewControllerdismissViewControllerAnimated 转场动画

2017-04-26 16.08.52.gif

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

2017-04-26 16.36.59.gif

- (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 文件。

2017-04-26 16.30.23.gif

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

lottie-ios lottie-ios

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


灵机文化
71 声望8 粉丝