Lottie设计与开发使用方法

1,655

前言

官网地址: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文件

安装:

  • 手动安装

    • 先关闭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介绍及使用相关(翻译)