为了提升用户体验, 在界面中加入一个设计良好的界面动画成为app设计的潮流. 之前听有人说过专业的界面动画是要有设计师、工程师、程序员、平面动画师等组成, 想想这是一个多大的任务量啊. 而且里面的各种逻辑处理, 复杂一些的动画, 一般人几乎是望其项背; 但有了Lottie之后, 就大大降低了开发者的难度. 我们可以直接把Lottie的动画文件导入, 设置一下参数, 就可以使用这个动画了. 为了满足大家的好奇心, 先附几个简单的实例:  ### 一. 初识Lottie 通过AE上的**Bodymovin**插件将AE中制作好的动画导出成一个json文件，Lottie实现了iOS/macOS/Android/React Native三个平台对该json文件的解析和渲染。    所有这些动画都是在After Effects中创建的，使用Bodymovin导出，并且无需额外的工程师工作即可完成原生渲染。 Bodymovin是一个又Hernan Torrisi创建的After Effects插件，导出文件格式为json和包括一个javascript网络播放器。而它最大的优点是提供了一套完整的跨平台动画实现工作流;  从代码上看，iOS端是基于layer，而最终都是对canvas的操作，中间除去解析json外，基本无耗费性能的行为。 当然也不可能都那么完美, 毕竟开源不久, 它仍然存在以下问题: 1. Bodymovin插件待完善，仍然有部分AE效果无法成功导出； 2. Lottie对json文件的支持待完善，目前有部分能成功导出成json文件的效果在移动端上无法很好的展现； 3. 目前不支持文字，所有文字必须转成矢量图才能正常展现动画； 4. 动画无法被编辑，即移动端无法更改远端下载到本地的动画； 5. 文档更新不及时等; 注: iOS需要iOS8及以上, 安卓需要API14及以上; ### 二. 如何用Bodymovin插件制作动画 iTerryWang在他的简书博客里详细介绍了如何使用Bodymovin插件制作动画, 我就不多说了, 也同时感谢一下iTerryWang的分享; [Lottie简介 & iOS集成使用](http://www.jianshu.com/p/94f7a0102be5) ### 三. 如何使用Lottie **1. 下载Lottie动画文件** 除了用Bodymovin插件创建动画外, 我们还可以在[Lottie Files](https://www.lottiefiles.com)下载;  Lottie Files是一个拥有高质量Lottie文件格式动画的网站。在这个网站，不仅设计师可以在上面陈列他们的动画而且还提供免费下载. 这步结束后, 我们就准备好了动画所需的JSON文件; **2. 新建工程** 新建一个工程, 命名为LottieTest;  **3. 导入Lottie动画库** 用CocoaPods安装Lottie动画库: 在终端进行如下操作: ①进入文件目录(文件目录要用自己的工程目录); ```javascript cd /Users/apple/Desktop/LottieTest ``` ②创建podfile ```javascript pod init ``` ③打开文件编辑 ```javascript target 'LottieTest' do pod 'lottie-ios' end ``` ④导入Lottie项目 ```javascript pod install ``` **4. 添加Lottie动画的JSON文件** 之前已经准备好这个文件了, 导入工程就行; **5. 创建动画** OC版: ```objective #import "ViewController.h" #import <Lottie/Lottie.h> @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; LOTAnimationView *lottieTest = [LOTAnimationView animationNamed:@"servishero_loading"]; lottieTest.contentMode = LOTViewContentModeScaleAspectFill; lottieTest.frame = self.view.bounds; lottieTest.autoresizingMask = NSViewWidthSizable | NSViewHeightSizable; [self.view addSubview:lottieTest]; [lottieTest play]; } @end ``` swift版: ```swift import UIKit import Lottie class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() if let animationView = LOTAnimationView(name: "servishero_loading") { // if let animationView = LOTAnimationView(contentsOf: URL(string: "https://github.com/airbnb/lottie-ios/raw/master/Example/Assets/LottieLogo1.json")!) { animationView.frame = self.view.bounds animationView.center = self.view.center animationView.loopAnimation = true animationView.contentMode = .scaleAspectFill animationView.animationSpeed = 0.5 // Applying UIView animation let minimizeTransform = CGAffineTransform(scaleX: 0.1, y: 0.1) animationView.transform = minimizeTransform UIView.animate(withDuration: 3.0, delay: 0.0, options: [.repeat, .autoreverse], animations: { animationView.transform = CGAffineTransform.identity }, completion: nil) view.addSubview(animationView) animationView.play() } } } ``` 至于android, reactNative参照下方github地址: [android](https://github.com/airbnb/lottie-android) [reactNative](https://github.com/airbnb/lottie-react-native) 扩展: [Airbnb 动画库Lottie](http://www.jianshu.com/p/19106e3d07b2)
