AE动画转Web代码工具指北Lottie

简介

Lottie 是 Airbnb 开源的一套 跨平台 的完整的 动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接运用在 iOS、Android、Web 和 React Native 之上，无需其他额外操作。

简单来说，Lottie 就是一个可以将 AE 动画转成可运行在 IOS、Android、Web、React Native 上的 AE 插件。

使用

工具

使用前请确保已安装这以下工具。

• 插件：bodymovin.zxp
• 解压：ZXP Installer

其他。

• Lottie 预览：https://www.lottiefiles.com/p…
• web bodymovin cdn: https://cdnjs.com/libraries/b…

使用步骤

1. 安装并解压bodymovin
2. 打开 AE，添加 bodymovin 扩展
3. 导出 data.json 文件

详细可参考：炫酷神器，AE 插件 Bodymovin.zxp 的安装与使用

API

由 bodymovin 导出的 data.json 实际就是动画的数据文件，我们引入的 bodymovin.js 库会对其做相应的解析。接下来我们只需要添加简单的初始化代码就可以在运行代码看到相应的动画效果了。

以下是最常用的api

1. 初始化

let animation = bodymovin.loadAnimation({animationData, // [必须] data.json 文件
  path, // data.json 文件路径(animationData/path 选其一传入即可)
  container，// [必须] 父容器
  renderer, // [必须] 渲染方式
  loop,
  autoplay
})

2. 暂停 / 停止 / 播放

bodymovin.play()
bodymovin.pause()
bodymovin.stop() // 回到第 0 帧

3. 跳转之某帧并播放

animation.gotoAndStop(time)
OR animation.gotoAndStop(frame)
----
animation.gotoAndPlay(time)
OR animation.gotoAndPlay(frame)

4. 设置 fp

animation.setSubframe()
// true: 使用本地环境的 fps [默认]
// false: 使用 ae 原本的 fps

5. 事件监听

animation.onComplete = function () {} // 动画结束
animation.onLoopComplete = function () {} // 当前循环结束
// 使用 addEventListener 方式
animation.addEventListener('complete', function () {})
animation.addEventListener('loopComplete', function () {})

一般来说以上的 api 即可满足大部分的动画展示需求了。更详细内容可参考官网～

Bodymovin 库

最后再分项目框架提供两个 bodymovin 的库

• react：react-bodymovin
• vue：vue-lottie