Bodymovin.js 不工作 - 动画不渲染

Question

我正在尝试使用 Bodymovin 在浏览器上渲染 After Effects 动画。我已经尝试过文档中的示例，但它不起作用。它不显示动画。我正在尝试 docs

中的示例

<html>
<body>
<div id="bm"></div>

<!-- Scripts -->

<script src="./bodymovin.js"></script>
<script>
var animation = bodymovin.loadAnimation({
    container: document.getElementById('bm'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    // path: 'https://raw.githubusercontent.com/airbnb/lottie-web/master/demo/bodymovin/data.json'
    path: 'data.json'
})
</script>

</body>
</html>

Answer 1

确保您正在导入文件，因为我也遇到了这个错误。我正在向您发送我的代码，以便您的页面显示运行，我正在使用 React，但您会明白这个概念，只需更改您的 json 文件名，我的是数据。

import React, { Component } from 'react';
import './Cool.css';
import data from './data.json';
import ReactBodymovin from 'react-bodymovin';

class AventadorPage extends Component {
render() {

    const bodymovinOptions = {
        loop: 1,
        autoplay: true,
        prerender: true,
        animationData: data,
    }

    return (
        <div className="main-container">
            <div className="animation">
                <ReactBodymovin options={bodymovinOptions} />
            </div>

            <div>
                <h1 className="title">A V E N T A D O R</h1>
            </div>
        </div>
    );
}
}

export default AventadorPage;

Answer 2

问这个问题已经快2年了。显然没有什么变化。现在我们必须导入 lottie，而不是 bodymovin。修复bodymovin无法识别的问题

data.json 是本地文件。我直接被 double-clicking 运行宁 index.html。这引发了 CORS 个问题。

要修复 CORS，路径需要是可访问的 URL，或者您需要运行在本地主机上。就这样。它应该可以解决问题。

var animation = bodymovin.loadAnimation({
  container: document.getElementById('bm'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://raw.githubusercontent.com/airbnb/lottie-web/master/demo/navidad/data.json'
})

<html>

<body>
  <div id="bm"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.3/lottie.min.js" integrity="sha512-35O/v2b9y+gtxy3HK+G3Ah60g1hGfrxv67nL6CJ/T56easDKE2TAukzxW+/WOLqyGE7cBg0FR2KhiTJYs+FKrw==" crossorigin="anonymous"></script>
</body>

</html>

Bodymovin.js 不工作 - 动画不渲染

Bodymovin.js not working - animation is not rendering

html

javascript

bodymovin