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...

使用步骤

bodymovin
bodymovin
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