AE的MG动画在html中展示

472 views

lottie-web

在 Web、Android 和 iOS 以及 React Native 上本地渲染 After Effects 动画。

安装bodymovin插件到AE中

  • 先下载 lottie-web/build/extension下的bodymovin.zxp
  • 按照项目README中的指示，安装bodymovin.zxp，我用的方法3,下载ZXP installer
  • 安装installer后，从软件的file→open中选择bodymovin.zxp，便可安装bodymovin，安装完成后,重新打开AEzip_installerae_bodymovin

AE通过bodymovin导出json文件的使用

可以查看lottie-web的README中的DEMO，简单代码示例

<!DOCTYPE html>
<html lang="ch">
<head>
  <meta charset="UTF-8" />
  <title>Bodymovin Demo</title>
</head>
<body>
  <div id="bm"> </div>
  <!-- Scripts -->
  <script src="scripts/bodymovin.js"></script>
  <script src="scripts/index.js"></script>
</body>
</html>

index.js

var animation = bodymovin.loadAnimation({
  container: document.getElementById('bm'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
})

bodymovin.js 项目的 lottie-web/build/player下