Question

我有一个简单的html来显示我在After Effects中制作的动画，但是在本地加载动画时无法显示该动画（data.json）。但是，如果我通过LottieFiles上传动画并使用我的html文件中生成的链接，则它可以工作。有人可以解释一下为什么我无法通过data.json而不是生成的链接来加载动画吗？

下面我把到目前为止的代码放进去：

<head>
    <!--  Meta  -->
    <meta charset="UTF-8">
    <title>Bodymovin Demo</title>
    <style>
        body {
            text-align: center;
        }
        h1 {
            margin-top: 2em;
        }
        #bm {
            width: 1000px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>Test Animation</h1>

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
    <script>
        var animation = bodymovin.loadAnimation({
            container: document.getElementById('bm'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            // this way works, but if i put 'data.json' which is on the same directory of this file it doesn't work        
            path: 'https://assets7.lottiefiles.com/packages/lf20_kxQ49M.json'
        });
    </script>
</body>

我还有一个指向“ data.json”文件的链接： https://drive.google.com/file/d/1xsikpLLQY-7FMV1_S5VelmB2_85LD-oi/view?usp=sharing

Answer 1

您很可能会收到CORS错误。

出于安全原因，浏览器似乎不允许您加载计算机上存储的JSON文件，只要.json文件在线托管，它就可以工作。

因此，通过已完成的lottiefile或在Web托管上。

Lottie本地动画未显示在网页上

1 个答案: