Lottie简介 & iOS集成使用

2017-03-09 本文已影响20101人 iTerryWang

Life

Lottie介绍

“Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with bodymovin and renders the vector animations natively on mobile and through React Native!” - 自官网：https://github.com/airbnb/lottie-ios

大致意思是：Lottie是一个可以解析使用【bodymovin】插件从 Adobe After Effects 中导出的格式为 json 的文件，并在 iOS、Android、macOS、React Native 中进行解析使用的开源库。

这个库由 Airbnb 开发并在2017年2月份左右开源的。

看一下官方实现的一部分效果：

Community 2_3.gif

Examples1.gif

Examples2.gif

Examples3.gif

Examples4.gif

是不是很cool！看到此库我是非常喜欢开心的！为什么呢？

先来脑补一些场景：
场景一：在开发 app 过程中，需要在 app 中实现设计师提供的效果动画，都是通过代码来实现，针对复杂的动画，开发同学更是会花费很长时间去实现，如果是处女座的设计师，还会坐在开发同学旁边“折磨”开发同学一起调细节，做过的同学一定深有体会。

场景二：还有一些情况，因为实现动画的开发成本比较高，比如需要1～2天去实现一个动画效果，但是因为版本周期比较紧，会在无奈中砍掉或者简化动画，那么原本想提升用户体验的，却打了折扣。

总的来说，动画要实现，需要设计师通过设计出来，然后开发同学再通过代码实现。开发完成后，再和设计同学一起对代码实现的效果进行微调，达到满意效果。
那么对一些炫酷的、体验非常好的动画设计，开发的成本很高，虽然现在一些第三方的开源动画可以参考，但是要做的有自己的特色，还是需要花时间去理解分析、实现、调试。对一些迭代周期短的app来说，花那么多时间去做一个动画，基本会被kill，设计同学一定很无奈和郁闷。

但是现在不同了！！！

Airbnb 开源的这个库，应该可以让设计师和开发同学喜笑颜开了。通过bodymovin 这个AE的插件，可以将AE设计好的动画导出为json格式的文件。交给开发同学，开发同学通过集成Lottie库，就可以读取设计同学给到的json文件，在程序中通过几行代码就可以实现原本要花费1天甚至更久的时间来实现的动画啦。是不是很cool？大大降低了开发同学的开发成本，而在客户端上展示的动画效果是和AE中的一样的，不需要花额外时间和开发一起微调了，这样一来，开发同学就把时间和精力放在动画以外的事情上就好了。boss开心了、设计同学开心了、开发同学也开心了、用户使用的也开心了，皆大欢喜是不是😄。

事事都不是完美的，通过对这个开源库的初步了解来看，大概可以看到以下的优点和不足：

优点：
1、开发成本低。设计师导出 json 文件后，扔给开发同学即可。原本要1天甚至更久的动画实现，现在只要不到一小时甚至更少时间了。

2、动画的实现成功率高了。设计师的成果可以最大程度得到实现，试错成本也低了。

3、支持服务端 URL 方式创建。所以可以通过服务端配置 json 文件，随时替换客户端的动画，不用通过发版本就可以做到了。比如 app 启动动画可以根据活动需要进行变换了。

4、性能。可以替代原来需要使用帧图完成的动画。节省了客户端的空间和加载的内存。对硬件性能好一些。

5、跨平台。iOS、安卓平台可以使用一套文件。省时省力，动画一致。不用设计师跑去两边去跟着微调确认了。

6、支持转场动画。 PresentViewController／DismissViewController 时可以做转场效果。（Demo 里有）

不足：
1、对一些AE的属性支持不够完全。

2、对系统平台版本限制，如 iOS8 及以上，安卓 API14 及以上。

3、对可交互的动画暂时还不行。主要是以播放类型动画。

因为开源时间不久，所以还存在一些不足和问题，希望 Airbnb 和大家能一起完善这个开源库，让更多酷炫、体验更好的动画得以实现。给用户带来绝佳的体验。

Lottie支持的平台：

支持：iOS、macOS、Android、React Native
当然swift也支持！！！

注意：iOS 支持的版本是 iOS8 及以上，安卓需要 API14 及以上。

上面说了这么多，Lottie是否是你需要的呢？如果是，那么请继续向下看！使用方法见下面👇
因为我是做苹果开发的，所以我就说说针对苹果的使用吧。

安装插件

****bodymovin是一个AE的开源的插件，我们需要先安装这个插件到AE中。****
1、下载bodymovin插件。https://github.com/bodymovin/bodymovin

2、下载插件安装器工具：http://aescripts.com/learn/zxp-installer/
打开http://aescripts.com/learn/zxp-installer/(zxp-installer安装文件Mac+windows 链接: https://pan.baidu.com/s/1hrQaKPA 密码: r3ni)，看到下面的界面，选自对应的系统即可，见下图：

下载插件安装器

3、插件安装器下载成功后，根据上图的提示进行插件安装即可：将第一步下载的 bodymovin.zxp 文件拖到安装器界面，看到下面安装成功的提示就代表安装成了。

安装插件成功

4、安装成功后打开AE，设置在首选项 ->常规，将允许脚本写入文件和访问网络选项勾选上。否则后面导出时会报错。设置页面见下图：

首选项->常规

勾选上允许脚本写入文件和访问网络

5、设置好以后，我们使用一个已经制作好的 .aep 文件为例，****使用bodymovin AE 导出 json ****文件。
状态栏上选择窗口 -> 扩展 -> Bodymovin，见下图：

到刚刚设置的导出目录中找到文件，给到开发同学就可以了。设计同学的工作基本OK了。
开发同学拿到json文件怎么做呢？接往下着看！

Lottie集成到项目

到 https://github.com/airbnb/lottie-ios下载最新版本源码，其中自带了 Demo，可运行方便学习。
集成的方法可以使用 cocoapods 方式集成，也可以使用 Carthage 方式集成。集成方法见官网说明。
pod install 安装成功后，在需要使用的文件中加入头文件的引用

#import <Lottie/Lottie.h>

下面👇一段简单说明了一下 Lottie 库里用到的方法和属性。可以自行看官方的Demo，可以忽略。

在 LOTAnimationView.h 中：

//创建视图的几个方法
+ (instancetype)animationNamed:(NSString *)animationName NS_SWIFT_NAME(init(name:));
+ (instancetype)animationNamed:(NSString *)animationName inBundle:(NSBundle *)bundle NS_SWIFT_NAME(init(name:bundle:));
+ (instancetype)animationFromJSON:(NSDictionary *)animationJSON NS_SWIFT_NAME(init(json:));
- (instancetype)initWithContentsOfURL:(NSURL *)url;

//可用属性
@property(nonatomic,readonly)BOOLisAnimationPlaying;   //是否正在动画
@property(nonatomic,assign)BOOLloopAnimation;          //是否循环播放动画
@property(nonatomic,assign)CGFloatanimationProgress;   //动画执行进度
@property(nonatomic,assign)CGFloatanimationSpeed;      //动画速度
@property(nonatomic,readonly)CGFloatanimationDuration; //动画时间

//实例方法
- (void)playWithCompletion:(LOTAnimationCompletionBlock)completion;//动画结束后可以执行一个block
- (void)play;    //播放
- (void)pause;   //暂停
- (void)addSubview:(LOTView *)view toLayerNamed:(NSString *)layer;

#if !TARGET_OS_IPHONE && !TARGET_IPHONE_SIMULATOR
@property(nonatomic) LOTViewContentMode contentMode;//非iOS的contentMode
#endif

ViewController.m
设置 present／dismiss controller 转场动画
在需要转场效果的 viewcontroller 中实现 UIViewControllerTransitioningDelegate代理中的下面两个方法，就可以设置 controller 转场动画了，animationName ：“vcTransition1” “vcTransition2” 就是 AE 导出的动画 json 文件名。

#pragma mark -- View Controller Transitioning

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
                                                                  presentingController:(UIViewController *)presenting
                                                                      sourceController:(UIViewController *)source {
  LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
                                                                                                          fromLayerNamed:@"outLayer"
                                                                                                            toLayerNamed:@"inLayer"];
  return animationController;
}

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

以上代码头文件中提供的方法和属性，具体见源代码。可以具体运行 Demo 体验一下。