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

Author: 2017-03-05

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 文件即可。

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="data.json"
    app:lottie_loop="true"
    app:lottie_autoPlay="true" />

　　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，反而会带来额外工作量。