lottie-react-native

一个允许渲染 After Effects 动画的库。

Android

iOS

tvOS

Web

GitHub

npm

Bundled version:

7.2.2

Lottie 可实时渲染 After Effects 动画，使应用能够像使用静态图片一样轻松地使用动画。

安装

Terminal

- npx expo install lottie-react-native

If you are installing this in an existing React Native app, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

示例

Lottie

import { useRef, useEffect } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import LottieView from 'lottie-react-native';

export default function App() {
  const animation = useRef<LottieView>(null);
  useEffect(() => {
    // 你可以以编程方式控制 ref，而不是使用 autoPlay
    // animation.current?.play();
  }, []);

  return (
    <View style={styles.animationContainer}>
      <LottieView
        autoPlay
        ref={animation}
        style={{
          width: 200,
          height: 200,
          backgroundColor: '#eee',
        }}
        // 在 https://lottiefiles.com/featured 查找更多 Lottie 文件
        source={require('./assets/gradientBall.json')}
      />
      <View style={styles.buttonContainer}>
        <Button
          title="重新启动动画"
          onPress={() => {
            animation.current?.reset();
            animation.current?.play();
          }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  animationContainer: {
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  buttonContainer: {
    paddingTop: 20,
  },
});

了解更多

访问官方文档

获取有关 API 及其用法的完整信息。