Блог

Я пытаюсь включить анимацию Лотти в свой проект 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
        },
        ...
     ]
}
  

Просто экспортируйте ее, как вы делали выше, а затем создайте компонент (я предполагаю, что вы находитесь в React) следующим образом:

 import React from 'react';
import Lottie from 'react-lottie';

import animation from './animation';

const Animation = ({ animePaused }) => {
  return (
    <Lottie
      options={{
        animationData: animation,
        autoplay: true
      }}
      height={200}
      isStopped={animePaused}
    />
  );
};

export default Animation;