Lottie for iOS 从安装到项目的简单使用

概念介绍：

Adobe After Effects：简称“AE”是Adobe公司推出的一款图形视频处理软件，适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。（这是百度百科的简单介绍，我们开发人员需要的知道就是用来制作动画的一个工具就可以了。）

bodymovin：在AE上做好的动画导出为json文件，是AE的一个插件。

Lottie：将AE使用bodymovin插件导出的json文件通过代码解析显示在移动设备上。

它们之间的关系如下图表示：

此图引用自http://cdn.trojx.me/blog_pic/lottie_sum.png

AE安装：

Mac 的**版本的下载链接：

百度云盘：https://pan.baidu.com/s/1eRMCL26

提取密码：xyu5

下载的文件夹中包含安装文件After Effects CC 2017.dmg以及**文件Adobe Zii cc2017.app压缩包。安装好 After Effects 后，解压运行Adobe Zii cc2017.app

安装 After Effects 插件 bodymovin

1、下载bodymovin插件。https://github.com/airbnb/lottie-web（没有错,bodymovin.zxp就是在这里，下载下来之后解压lottie-web-master，bodymovin的位置在lottie-web-master->build->extension->bodymovin.zxp）

2、下载插件安装器工具：https://aescripts.com/learn/zxp-installer/

选择对用平台download。

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

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

首选项->常规

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

---

5、设置好以后，使用bodymovin AE 导出 .json文件。
状态栏上选择窗口 -> 扩展 -> Bodymovin，见下图：

导出后再的效果为

好了到现在为止我们制作出了一个动画下面就是使用lottie在项目中加载出来显示在移动端了。

在Xcode中使用Lottie

1、启动Xcode使用SingleViewApplication创建一个新项目，新项目命名为LottieDemo。

2、使用CocoaPods安装Lottie动画库

     2.1、关闭Xcode，打开terminal，使用cd命令进入工程根目录

     2.2、使用 pod init创建一个Podfile文件

     2.3、打开Podfile编辑如下      

        target 'LottieDemo' do

          # Comment the next line if you're not using Swift and don't want to use dynamic frameworks

          use_frameworks!

          # Pods for LottieDemo

          pod 'lottie-ios'

        end
            编辑完成后保存
      2.4、回到Terminal执行 pod install
CocoaPods会下载Lottie动画库并在Xcode项目中打包。打包结束后你会发现出现一个叫LottieDemo.xcworkspace.的新项目文件。在Xcode中打开这个文件并开始进行编码。
添加Animation JSON Files
现在把JSON文件拖入Xcode项目的工程管理器，把它放入LottieDemo小组。

接下来就非常简单了，就和我们使用一个普通的控件一样

对！就是这么简单！！！

官方文档

• Web页面，以svg/canvas/html+js的形式。Bodymovin自己提供了作为Player的js库——bodymovin.js；
• Android原生，通过Airbnb的开源项目“lottie-android”实现；
• iOS原生，通过Airbnb的开源项目“lottie-ios”实现；
• React Native，通过Airbnb的开源项目“lottie-react-native”实现。