Question

我正在尝试在我的React项目中包含一个Lottie动画。它成功加载了Lottie组件，但没有图像。它无法解析资产。但是，它是作为json（动画数据）和包含图像的图像目录提供给我的。

我试图解决此问题的方法是将json数据放置在javascript文件中，此js文件导入所有图像，并在json数据中使用这些导入。这样，React将为这些图像解析正确的路径。我现在面临的问题是我似乎无法正确地将此Javascript文件导入/提供给Lottie组件的animationData属性。

这是我到目前为止所掌握的。结果为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

只需像上面一样导出它，然后创建一个组件（我假设您在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;

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

1 个答案: