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