javascript - 我想展示 2 个不同的抽签动画，svg1 和 svg2

Question

这是我的代码，目前它显示 svg1 两次。我想显示 svg1 和 svg2。

未来我想添加超过 2 个 SVG 动画。我是新来的反应和洛蒂

import React from 'react';
import Lottie from 'react-lottie';
import svg1 from '../../assets/svg/svg1';
import svg2 from '../../assets/svg/svg2';

export default function Landing() {
    const defaultOptions = {
        loop: true,
        autoplay: true,
        animationData: svg1,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };

    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <h1>Landing Page</h1>
            <Lottie options={defaultOptions} height={900} width={900} />
            <Lottie options={defaultOptions} height={900} width={900} />
        </div>
    );
}

谢谢

Answer 1

您可以定义多个“defaultOptions”变量并在多个Lottie组件上使用它们，如下所示：

export default function Landing() {
    const defaultOptions1 = {
        loop: true,
        autoplay: true,
        animationData: svg1,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };
    const defaultOptions2 = {
        loop: true,
        autoplay: true,
        animationData: svg2,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };

    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <h1>Landing Page</h1>
            <Lottie options={defaultOptions1} height={900} width={900} />
            <Lottie options={defaultOptions2} height={900} width={900} />
        </div>
    );
}