当前位置：首页 > news >正文

三步打造流畅动画：React Native Reanimated 链式构建神器

news 2026/4/30 10:59:41

三步打造流畅动画：React Native Reanimated 链式构建神器

【免费下载链接】react-native-reanimatedReact Native's Animated library reimplemented项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimated

React Native Reanimated 是一个强大的动画库，它重新实现了 React Native 的 Animated 库，为开发者提供了更加流畅和高效的动画体验。通过使用 Reanimated，你可以轻松创建复杂的动画效果，提升应用的用户体验。

一、准备工作：快速集成 React Native Reanimated

在开始创建动画之前，首先需要将 React Native Reanimated 集成到你的项目中。你可以通过以下步骤快速完成集成：

克隆仓库：git clone https://gitcode.com/GitHub_Trending/re/react-native-reanimated
安装依赖：在项目根目录下运行npm install或yarn install
按照官方文档进行配置，确保 Reanimated 能够正常工作

完成这些步骤后，你就可以开始使用 Reanimated 来创建动画了。

二、创建基础动画：从简单到复杂

React Native Reanimated 提供了多种创建动画的方式，其中最常用的是使用useSharedValue和useAnimatedStyle钩子。下面我们来创建一个简单的摆动动画。

首先，我们需要导入 Reanimated 库中的相关函数：

import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

然后，创建一个共享值来控制动画的进度：

const rotation = useSharedValue(0);

接下来，使用useAnimatedStyle创建动画样式：

const animatedStyle = useAnimatedStyle(() => ({ transform: [{ rotate: `${rotation.value}deg` }], }));

最后，通过触摸事件来触发动画：

<TouchableOpacity onPress={() => { rotation.value = withRepeat(withTiming(10, { duration: 200 }), 4, true); }}> <Animated.View style={[{ width: 100, height: 100, backgroundColor: 'blue' }, animatedStyle]} /> </TouchableOpacity>

运行这段代码，你将看到一个蓝色的方块在点击后左右摆动。

三、构建链式动画：组合多种动画效果

Reanimated 不仅可以创建简单的动画，还可以通过withSequence等函数将多个动画组合成链式动画。下面我们来创建一个包含多个步骤的动画。

首先，创建多个共享值来控制不同的动画属性：

const translateX = useSharedValue(0); const scale = useSharedValue(1);

然后，使用withSequence组合多个动画：

const startAnimation = () => { translateX.value = withSequence( withTiming(100, { duration: 500 }), withTiming(0, { duration: 500 }) ); scale.value = withSequence( withTiming(1.5, { duration: 500 }), withTiming(1, { duration: 500 }) ); };

最后，将动画样式应用到视图上：

<Animated.View style={[{ width: 100, height: 100, backgroundColor: 'blue', transform: [ { translateX: translateX.value }, { scale: scale.value } ] }]} />

运行这段代码，你将看到一个蓝色的方块先向右移动并放大，然后再回到原来的位置和大小。