在 React 中加载带有图像的 Lottie 动画

Question

I'm trying to include a Lottie animation in my React project. It successfully loads the Lottie component, but without images. It can't resolve the assets. However, it is delivered to me as a json (animation data) and an image directory containing the images.

The way I'm trying to solve this is by placing the json data in a javascript file, this js file imports all images and uses these imports in the json data. This way React will resolve the correct path for these images. The issue I'm facing now is that I can't seem to correctly import/serve this javascript file to the animationData property of the Lottie component.

Here's what I've got so far. And it results in 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
        },
        ...
     ]
}

Answer 1

Just export it like you did above, and then create a component (I assume you are in React) like so:

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;