-3

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

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

2 回答 2

3

确保您正在导入文件，因为我也收到了该错误。我正在向您发送我的代码以使您的页面运行，我正在使用 react 但您会明白这个概念，只需更改您的 json 文件名我的就是 data.

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;
于 2018-07-08T18:09:26.363 回答
1

我问这个问题已经快2年了。几件事情显然发生了变化。现在我们必须导入 lottie，而不是 bodymovin。它修复了 bodymovin 无法识别的问题。

data.json 是一个本地文件。我通过双击直接运行 index.html 。这引发了CORS问题。

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

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>

于 2020-11-01T17:38:20.360 回答