Бодимовин не работает

Я попробовал примеры, представленные на сайте и codepen. Они работают через сервер Xampp. Но мои пользовательские анимации, экспортированные из эффектов, не работают.

Файлы существуют в моей директории проекта:

(1) Index.html
(2) index.js
(3) bodymovin.js
(4) data.json

Файлы здесь->;;

Источник

1 ответ

Решение

Убедитесь, что вы импортируете файлы, потому что я тоже получаю эту ошибку. Я посылаю вам свой код для запуска вашей страницы, я использую реагирование, но вы поймете концепцию, просто измените имя вашего 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;
Источник

Прошло почти 2 года с тех пор, как я задал этот вопрос. По-видимому, мало что изменилось. Вместо бодимовина теперь нам нужно импортировать лотерею. Исправлена ​​проблема не распознавания 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>

Источник
Другие вопросы по тегам