简介

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