使用react-lottie实现动画效果

最新推荐文章于 2025-11-16 00:11:56 发布

原创最新推荐文章于 2025-11-16 00:11:56 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

该篇文章介绍了如何在React应用中使用`react-lottie`库加载名为gitfs.json的动画json文件，创建了一个名为IconComponent的可复用动画组件，设置默认播放选项.

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

import iconData from "~/assets/gifs/gitfs.json";   //动画json文件

const IconComponent: React.FC = () => {
    
    const defaultOptions = {
        loop: true,
        autoplay: true,
        animationData: iconData,
        rendererSettings: {     
        },
        
    };
    return <Lottie width="66px"  options={defaultOptions} 
    />;
};

export default IconComponent;