动画

了解如何集成 React Native 动画并将其用于你的 Expo 项目。

动画是增强用户体验的绝佳方式。在你的 Expo 项目中，你可以使用来自 React Native 的 Animated API。然而，如果你想使用性能更好、功能更强大的高级动画，你可以使用 react-native-reanimated 库。它提供了一个简化创建流畅、强大且可维护动画的 API。

🌐 Animations are a great way to enhance and provide a better user experience. In your Expo projects, you can use the Animated API from React Native. However, if you want to use more advanced animations with better performance, you can use the react-native-reanimated library. It provides an API that simplifies the process of creating smooth, powerful, and maintainable animations.

安装

🌐 Installation

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

🌐 You can skip installing react-native-reanimated if you have created a project using the default template. This library is already installed. Otherwise, install it by running the following command:

用法

🌐 Usage

最小的例子

🌐 Minimal example

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

🌐 The following example shows how to use the react-native-reanimated library to create a simple animation. For more information on the API and advanced usage, see react-native-reanimated documentation.

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,
  },
});

其他动画库

🌐 Other animation libraries

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

🌐 You can use other animation packages such as Moti in your Expo project. It works on Android, iOS, and web.