Lottie介绍
“Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with bodymovinand renders the vector animations natively on mobile and through React Native!” - 官网：https://github.com/airbnb/lottie-ios
大意：Lottie 是一个可应用于Andriod和iOS的动画库，它通过bodymovin插件来解析Adobe After Effects 动画并导出为json文件，通过手机端原生的方式或者通过React Native的方式渲染出矢量动画。在 iOS、Android、macOS、React Native 中都可以进行解析。
这个库是由 Airbnb 开发，并在2017年2月份左右开源的
以下是官方实现的一部分效果：
Examples1-2.gif
Community 2_3.gif
Examples2.gif
开发人员有了这个框架，再也不用去苦恼各种动画的实现了。这个框架，UI设计人员将动画图制作好了后，利用工具转为json文件，开发人员通过框架提供的方法加载json就可以实现各种精彩的动画，但是有一个缺点，这个框架的动画效果只能作为展示，不能产生交互行为。
一、集成（通过cocoapods）。
1.在podfile中pod引入：
pod 'lottie-ios'
2.cd到podfile文件所在目录下，运行
pod install
- 假如项目之前集成过其他第三方库，比如Masonry，这个时候你编译项目，可能会报code1错误，当然没报错最好。稍安勿躁，人家官方文档说了，还得安装Carthage。
二、安装Carthage
1、安装 Homebrew
- 将以下命令粘贴至终端即可
第一步：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
第二步：
brew update
2、安装 Carthage
brew install carthage
可通过下面这条命令来查看版本。
carthage version
3、使用 Carthage 安装依赖
第一步：
cd ~/路径/项目文件夹
第二步：创建一个空的 Carthage 文件 Cartfile
touch Cartfile
第三步：使用 Xcode 打开 Cartfile 文件
open -a Xcode Cartfile
第四步：在cartfile里面加一行代码
github "airbnb/lottie-ios" "master"
第五步：终端执行更新命令
carthage update --platform iOS
OK,你再编译项目试试，，这个时候code1错误没有了。是不是很惊喜。注意：项目名字最好为英文，因为这个框架是国外的，假如项目名字包含中文也会出现想像不到的错误。
那么问题来了，这个时候可能会出现这种情况：导入头文件还有索引，但是导入后总是报错，报找不到那个头文件，这种时候，只需多重启几次Xcode。就能OK
三、lottie的使用
Lottie支持iOS 8 及其以上系统。当我们把动画需要的images资源文件添加到Xcode的目标工程的后，Lottie 就可以通过JSON文件或者包含了JSON文件的URL来加载动画。
- 最简单的方式是用LOTAnimationView来使用它,这也是最常用的一种方式。
LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
// Do Something
}];
- 如果你使用到了多个bundle文件，你可以这么做：
LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie" inBundle:[NSBundle YOUR_BUNDLE]];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
// Do Something
}];
- 或者你可以用代码通过NSURL来加载，这种情况一般是将动画效果保存在服务器，动态加载。
LOTAnimationView *animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
[self.view addSubview:animation];
Lottie 支持iOS中的UIViewContentModes的 aspectFit, aspectFill 和 scaleFill这些属性。
- 你可以控制动画的进度
CGPoint translation = [gesture getTranslationInView:self.view];
CGFloat progress = translation.y / self.view.bounds.size.height;
animationView.animationProgress = progress;
- 想要任意视图来给Lottie View中的动画图层做遮罩吗 ？只要你知道After Effects中对应的图层的名字，那就是小菜一碟的事了：
UIView *snapshot = [self.view snapshotViewAfterScreenUpdates:YES];
[lottieAnimation addSubview:snapshot toLayerNamed:@"AfterEffectsLayerName"];
- Lottie 带有一个UIViewController动画控制器，可以用来自定义转场动画！
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
presentingController:(UIViewController *)presenting
sourceController:(UIViewController *)source {
LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
fromLayerNamed:@"outLayer"
toLayerNamed:@"inLayer"];
return animationController;
}
Airbnb 开源的这个库，可以将AE设计好的动画导出为json格式的文件。交给开发同学，开发同学通过集成Lottie库，就可以读取设计同学给到的json文件，在程序中通过几行代码就可以轻松实现动画啦。大大降低了开发同学的开发成本，而在客户端上展示的动画效果是和AE中的一样的，不需要花额外时间和开发一起微调了，这样一来，开发同学就把时间和精力放在动画以外的事情上就好了。
这个开源库大概可以看到以下的优点和不足：
优点：
1、开发成本低。设计师导出 json 文件后，开发人员使用这个第三库加载出来json就可以。只要不到几分钟时间。
2、动画的实现成功率高了。设计师的成果可以最大程度得到实现，试错成本也低了。
3、支持服务端 URL 方式创建。所以可以通过服务端配置 json 文件，随时替换客户端的动画，不用通过发版本就可以做到了。比如 app 启动动画可以根据活动需要进行变换了。
4、性能。可以替代原来需要使用帧图完成的动画。节省了客户端的空间和加载的内存。对硬件性能好一些。
5、跨平台。iOS、安卓平台可以使用一套文件。省时省力，动画一致。不用设计师跑去两边去跟着微调确认了。
6、支持转场动画。 PresentViewController／DismissViewController 时可以做转场效果。
不足：
1、对一些AE的属性支持不够完全。
2、对系统平台版本限制，如 iOS8 及以上，安卓 API14 及以上。
3、对可交互的动画暂时还不行。主要是以播放类型动画。
因为开源时间不久，所以还存在一些不足和问题，希望 Airbnb 和大家能一起完善这个开源库，让更多酷炫、体验更好的动画得以实现。给用户带来绝佳的体验。
网友评论