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

概念介绍:

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

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

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

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

Lottie for iOS 从安装到项目的简单使用_第1张图片

此图引用自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 文件拖到安装器界面,看到下面安装成功的提示就代表安装成了。

Lottie for iOS 从安装到项目的简单使用_第2张图片


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

Lottie for iOS 从安装到项目的简单使用_第3张图片
首选项->常规
勾选上允许脚本写入文件和访问网络

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


Lottie for iOS 从安装到项目的简单使用_第4张图片


Lottie for iOS 从安装到项目的简单使用_第5张图片

导出后再的效果为

Lottie for iOS 从安装到项目的简单使用_第6张图片

好了到现在为止我们制作出了一个动画下面就是使用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小组。
Lottie for iOS 从安装到项目的简单使用_第7张图片
接下来就非常简单了,就和我们使用一个普通的控件一样
Lottie for iOS 从安装到项目的简单使用_第8张图片
对!就是这么简单!!!

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


你可能感兴趣的:(学习)