允许渲染 After Effects 动画的库。
Lottie 实时渲染 After Effects 动画,使应用可以像使用静态图片一样轻松地使用动画。
¥Lottie renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.
¥Installation
-
npx expo install lottie-react-native
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
¥Usage
import React, { useRef, useEffect } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import LottieView from 'lottie-react-native';
export default function App() {
const animation = useRef(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,
},
});
import LottieView from 'lottie-react-native';
有关更详细的文档,请参阅 Lottie-React-Native 存储库。
¥Refer to the lottie-react-native repository for more detailed documentation.