Загрузка анимации Лотти с изображениями в React - PullRequest
Новая
       12

Загрузка анимации Лотти с изображениями в React

0 голосов
/ 03 апреля 2019

Я пытаюсь включить анимацию Лотти в свой проект React. Он успешно загружает компонент Lottie, но без изображений. Это не может разрешить активы. Тем не менее, он поставляется мне как json (данные анимации) и каталог изображений, содержащий изображения.

Я пытаюсь решить эту проблему, поместив данные json в файл javascript, этот файл js импортирует все изображения и использует этот импорт в данных json. Таким образом, React определит правильный путь для этих изображений. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я не могу правильно импортировать / обслуживать этот файл javascript в свойство animationData компонента Lottie.

Вот что у меня так далеко. И это приводит к Uncaught Error: Cannot find module '../../assets/animations/background-animation/animation.js'

BackgroundAnimation.tsx 

import * as React from 'react';
import Lottie from 'react-lottie';
import animationData from '../../assets/animations/background-animation/animation.js';

export default class BackgroundAnimation extends React.Component {

    constructor(props) {
      super(props);
      this.state = {isStopped: false, isPaused: false};
    }

    render() {  
      const defaultOptions = {
        loop: true,
        autoplay: true, 
        animationData: animationData,
        rendererSettings: {
          preserveAspectRatio: 'xMidYMid slice'
        }
      };

      return <Lottie options={defaultOptions}/>
    }
  }

animation.js 

import img_0 from './images/img_0.png'
import img_1 from './images/img_1.png'
...

export default {
    "v": "5.4.4",
    "fr": 30,
    "ip": 0,
    "op": 930,
    "w": 1920,
    "h": 1080,
    "nm": "TV - landscape",
    "ddd": 0,
    "assets": [
        {
            "id": "image_0",
            "w": 2349,
            "h": 1134,
            "u": "",
            "p": img_0,
            "e": 0
        },
        {
            "id": "image_1",
            "w": 1138,
            "h": 1139,
            "u": "",
            "p": img_1,
            "e": 0
        },
        ...
     ]
}
...