Lottie 动画文件未显示

Question

我试图在我的项目中添加很多动画，但它根本没有显示在浏览器中。我可以检查元素并查看 head 标签中的 BODYMOVING LIBRARY，以及下面的脚本和代码。该文件以 zip 文件形式发送给我，其中包含一个包含动画代码的 .json 文件、一个用于不移动照片的 svg 文件、一个包含演示的 .html 文件。

我已经在项目的头部导入了这样的bodymoving库

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.js"></script>

我正在尝试在我的 html 文件中使用它，如下所示

<canvas id="canvas" width="300" height="300"></canvas>
  <script>
       bodymovin.loadAnimation({
         container: document.getElementById('canvas'),
         renderer: 'canvas',
         loop: true,
         autoplay: true,
         path: 'data.json', // the .json file is in the same folder as the html
     });

Answer 1

根据 Lottie 文档 (https://github.com/airbnb/lottie-web)，您需要有一个

div

来保存您的动画，所以而不是

<canvas id="canvas" width="300" height="300"></canvas>

尝试一下

<div id="canvas" width="300" height="300"></div>