从 Adobe After Effect 将动画导出为 JSON 并在 Android 上使用

1. 从 Adobe After Effect 导出 JSON

  bodymovin 是 Adobe After Effect 的一个插件,提供了从 Adobe After Effect 导出 JSON 的方法。

1.1. 安装 bodymovin

  bodymovin 提供了三种安装方法,由于国内网络带来的推送和同步问题,从 Adobe Add-ons 基本无法正常安装,推荐直接下载安装,方法如下。

1.1.1. 下载 bodymovin

  首先从这里下载最新版本的 bodymovin,解压后在 /build/extension/ 文件下找到 bodymovin.zxp。

1.1.2. 下载并安装 ZXP Installer

  从这里下载并安装 ZXP Installer。打开 ZXP Installer,点击 File / Open,选择上一步中得到的 bodymovin.zxp,稍等片刻即可安装完毕。

1.2. 使用 bodymovin 导出 JSON

  打开一个 Adobe After Effect 项目,点击 Window / Extensions / Bodymovin,出现如图1所示对话框,点击 Selected 选中要导出的 Composition,选择导出文件的路径(Destination Folder),点击 RENDER 即可导出。

图1

图1

  导出完成后,可以点击 PREVIEW 进入预览窗口,然后点击 CURRENT RENDERS 预览当前导出的项目,如图2。

图2

图2

2. 在 Android 上使用导出的 JSON

  lottie-android 可以在 Android 上直接渲染使用 bodymovin 导出的 JSON,使用方法很简单,只需把前面导出的 JSON 放在 /main/assets/ 目录下,然后在布局文件中加入 LottieAnimationView ,使用 app:lottie_fileName 指明 JSON 文件即可。

  lottie-android 也支持动态地加载动画和播放控制,详情可以参考项目页面

3. 目前的问题

  bodymovin 作为 Adobe After Effect 的插件,将 Adobe After Effect 的动画导出为 JSON,并提供了 JS 播放器,方便在网页端使用,但 bodymovin 还不能支持 After Effect 的全部功能。

  lottie-android 在 bodymovin 的基础上,使用 bodymovin 导出的 JSON 在 Android 上进行渲染,也还不能支持 bodymovin 的全部功能。这就导致 lottie-android 对 After Effect 的支持更加有限,比如对 Repeater 就无法支持,如果在 After Effect 中使用了 Repeater,导出的 JSON 就无法在 Android 上正常播放。此外实测 lottie-android 也不支持使用表达式,使用 Math.round() 等函数也会导致动画无法正常播放。

  由于诸如此类的兼容性问题,建议在一开始就面向 bodymovin 或者 lottie,规避无法支持的功能。如果想要把之前的 After Effect 动画导出为 JSON 并在 Android 上播放,须要仔细检查动画中是否用到了不支持的功能。

  目前来看,对于简单的动画,使用 lottie 可以很方便和高效地完成从设计到实现的整个流程。但由于目前 lottie 和 bodymovin 对 Adobe After Effect 的支持尚不完善,如果在设计时刻意追求兼容 lottie 和 bodymovin,反而会带来额外工作量。