Lottie设计与开发使用方法

前言

官网地址：airbnb.design/lottie/

Lottie是一种新的开发动画的方式. 学会使用Lottie,会极大改善你和开发小哥哥撕逼的状况, 由于动画咱们都给作好了他只须要给播放一下就行了!!

有一个 LottieFiles 的网站，其内提供了不少设计师上传的 Lottie 动画，并提供预览的效果，只要咱们看中了，就能够下载下来使用，很是的方便。 本文主要介绍设计对于Lottie的使用方法，开发的使用方法会在文章末尾有连接介绍（对于一个设计来讲前端还好，后端真心头大，天书同样，o(╥﹏╥)o）

从AE开始（AE大神可自行跳过）

1.安装AE

After Effects(尽可能选择17之后的版本)

具体下载地址在这我就很少介绍了，万能的度娘能让你找到各式各样的下载地址还有破解器（固然直接Adobe官网购买正版的土豪例外）

2.安装bodymovin插件

想了解此插件能够参看该插件的GitHub页面.

选项1：

从aescripts + aeplugins下载： http ：//aescripts.com/bodymovin/
点击连接进入网站下载(ps:价格改为0 ，就是免费喽)

选项2：

从adobe商店 creative.adobe.com/addons/prod… CC 2014及以上版本获取。

选项3：

提取内容并/ build / extension获取.zxp文件

安装：

• 使用aescripts.com上的ZXP安装程序。

• 手动安装

  • 先关闭AE;

  • 用WinRAR或相似软件打开bodymovin.zxp文件,并将解压后的文件夹直接复制到
    C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
    或者是C:<username>\AppData\Roaming\Adobe\CEP\extensions下,
    对于MAC机器路径是
    /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

    

    

  • 修改注册表.对于Windows,打开注册表修改器,找到HKEY_CURRENT_USER/Software/Adobe/CSXS.6,并在此路径下添加一个名为PlayerDebugMode的KEY,并赋值为1;
    对于MAC,打开文件~/Library/Preferences/com.adobe.CSXS.6.plist并在末尾添加一行,键为PlayerDebugMode,值为1;

  • 设置AE 不管以何种方式安装bodymovin插件,都须要在AE的编辑->首选项->常规中勾选容许脚本写入文件和访问网络(默认不开启)

  

开始制做动画

具体制做的动画就看各个设计师在自由发挥了，在此就很少作介绍了，毕竟本文不是AE教学，就先拿已完成的文件作案例

导出json格式文件

• 窗口-扩展-Bodymovin(因为没办法截图，只能用手机拍了o(╥﹏╥)o)

• 而后就弹出Bodymovin页

配一张汉化翻译图（能力有限没找到汉化插件）

• 设置页默认选中第二个就行了，按照我以前听过一个大佬说过,软件若是有默认选项,那么选默认老是没错的. 这里咱们之间选择默认的第二个,其它只是特殊需求状况下须要改选的.

• 点击渲染, 这里我保存在桌面, 出现了一个后缀.json的文件（必定要选中最最前面的绿点！必定要选中最最前面的绿点！必定要选中最最前面的绿点！）

  

• 到这里,整个Lottie的动画导出就结束了.接下来只要将你的json文件交付给开发就行了, 他们会在代码中添加Lottie库来加载咱们制做的动画.-

开发使用方法

因为本人是设计，开发的那些代码彻底看不懂，在此放上两个连接，有兴趣的大佬能够看一看
lottie使用教程
lottie介绍及使用相关（翻译）