首页指南参考教程

Lottie

允许渲染 After Effects 动画的库。

Android
iOS
tvOS
Web

该库在 Expo SDK 参考中列出,因为它包含在 Expo 中。你可以将你选择的任何库与 开发构建 一起使用。

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

¥Lottie renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

安装

¥Installation

Terminal
npx expo install lottie-react-native

If you are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

用法

¥Usage

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(() => {
    // You can control the ref programmatically, rather than using autoPlay
    // animation.current?.play();
  }, []);

  return (
    <View style={styles.animationContainer}>
      <LottieView
        autoPlay
        ref={animation}
        style={{
          width: 200,
          height: 200,
          backgroundColor: '#eee',
        }}
        // Find more Lottie files at https://lottiefiles.com/featured
        source={require('./assets/gradientBall.json')}
      />
      <View style={styles.buttonContainer}>
        <Button
          title="Restart Animation"
          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

import LottieView from 'lottie-react-native';

有关更详细的文档,请参阅 Lottie-React-Native 存储库

¥Refer to the lottie-react-native repository for more detailed documentation.

Expo 中文网 - 粤ICP备13048890号