Lottie-动画

Lottie 是一个开源库，用于在 Web、Android、iOS、React Native 和 Windows 应用中轻松渲染 After Effects 动画。以下是在不同平台上使用 Lottie 的简要说明：

Web

1. 安装 Lottie：

npm install lottie-web

2. 在 JavaScript 文件中导入 Lottie：

import lottie from 'lottie-web';

3. 在 HTML 文件中创建一个容器元素：

<div id="lottie-container"></div>

4. 使用 Lottie 加载和播放动画：

const container = document.getElementById('lottie-container');
const animation = lottie.loadAnimation({
  container: container,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'path/to/your/animation.json',
});

React

1. 安装 react-lottie：

npm install react-lottie

2. 在 React 组件中导入 Lottie：

import Lottie from 'react-lottie';
import animationData from 'path/to/your/animation.json';

3. 在组件中使用 Lottie：

const defaultOptions = {
  loop: true,
  autoplay: true,
  animationData: animationData,
  rendererSettings: {
    preserveAspectRatio: 'xMidYMid slice',
  },
};

function MyComponent() {
  return <Lottie options={defaultOptions} />;
}

React Native

1. 安装 lottie-react-native 和 lottie-ios：

npm install lottie-react-native lottie-ios

2. 链接原生模块：

npx react-native link lottie-ios
npx react-native link lottie-react-native

3. 在 React Native 组件中导入 Lottie：

import LottieView from 'lottie-react-native';

4. 在组件中使用 Lottie：

function MyComponent() {
  return <LottieView source={require('path/to/your/animation.json')} autoPlay loop />;
}

对于 Android 和 iOS 原生应用，您可以查阅 Lottie 的官方文档，了解如何在各自平台上集成和使用 Lottie