React Lottie Player 使用教程

最新推荐文章于 2024-09-28 07:50:39 发布

平奇群Derek

最新推荐文章于 2024-09-28 07:50:39 发布

阅读量413

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00069/article/details/141340608

版权

React Lottie Player 使用教程

react-lottie-playerFully declarative React Lottie player项目地址:https://gitcode.com/gh_mirrors/re/react-lottie-player

项目介绍

react-lottie-player 是一个基于 React 的 Lottie 动画播放器组件。Lottie 是一个由 Airbnb 开源的动画库，可以将 Adobe After Effects 动画导出为 JSON 格式，并在 web 和移动端上进行播放。react-lottie-player 提供了完全声明式的控制，使得在 React 应用中使用 Lottie 动画变得简单和直观。

项目快速启动

安装

首先，你需要安装 react-lottie-player 包：

npm install @lottiefiles/react-lottie-player

基本使用

以下是一个简单的示例，展示如何在 React 应用中使用 react-lottie-player：

import React from 'react';
import { Player } from '@lottiefiles/react-lottie-player';

function App() {
  return (
    <div>
      <Player
        autoplay
        loop
        src="https://assets9.lottiefiles.com/packages/lf20_UJNc2t.json"
        style={{ height: '300px', width: '300px' }}
      />
    </div>
  );
}

export default App;

在这个示例中，我们引入了 Player 组件，并设置了 autoplay 和 loop 属性，同时指定了一个 Lottie 动画的 JSON 文件 URL。