动画

编辑

了解如何集成 React Native 动画并在你的 Expo 项目中使用它。

动画是提升体验、提供更好用户体验的好方法。在你的 Expo 项目中，你可以使用 React Native 的 Animated API。然而，如果你想使用更高级的动画、获得更好的性能，可以使用 react-native-reanimated 库。它提供了一个简化创建平滑、强大且易维护的动画的 API。

安装

如果你使用默认模板创建了项目，可以跳过安装 react-native-reanimated。这个库已经安装好。否则，请通过以下命令安装：

Terminal

- npx expo install react-native-reanimated

用法

最小示例

下面的示例展示如何使用 react-native-reanimated 库来创建一个简单动画。有关 API 和高级用法的更多信息，请参阅 react-native-reanimated 文档。

使用 react-native-reanimated

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing,
} from 'react-native-reanimated';
import { View, Button, StyleSheet } from 'react-native';

export default function AnimatedStyleUpdateExample() {
  const randomWidth = useSharedValue(10);

  const config = {
    duration: 500,
    easing: Easing.bezier(0.5, 0.01, 0, 1),
  };

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value, config),
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, style]} />
      <Button
        title="toggle"
        onPress={() => {
          randomWidth.value = Math.random() * 350;
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 80,
    backgroundColor: 'black',
    margin: 30,
  },
});

其他动画库

你可以在你的 Expo 项目中使用其他动画包，例如 Moti。它在 Android、iOS 和网页上都能工作。