极客教程React Native 淡入淡出效果
在本文中，我们将详细讨论在React Native中使用Animated模块实现淡入淡出效果。
淡入淡出效果是一种经典的动画技术，无缝地将元素从不可见状态过渡到可见状态，反之亦然，这在动画中占据重要地位。
先决条件
- React Native介绍
- React Native组件
- React Hooks
- Expo CLI
- Node.js和npm（Node Package Manager）
创建React Native应用的步骤
步骤1：使用以下命令创建React Native应用
npx create-expo-app <<Project-Name>>
步骤2：创建您的项目文件夹，例如react-native-reanimated之后，使用以下命令导航到该文件夹：
cd <<Project-Name>>
项目结构
项目的结构将如下所示。
方法1：使用react-native-reanimated库
在这种方法中，我们将使用react-native-reanimated库来在React Native应用中创建淡入和淡出效果。为了实现这一目标，我们初始化了一个动画值来表示透明度。当对应的按钮被按下时，set函数会更新其值，从而实现透明度值之间的平滑过渡和所需的淡入和淡出动画。
要安装 react-native-reanimated 库，请使用以下命令
npm install react-native-reanimated
package.json用于库和依赖版本。
{
"dependencies": {
"react-native-paper": "4.9.2",
"@expo/vector-icons": "^13.0.0",
"react-native-reanimated": "^3.5.0",
}
}
示例1： 在这个React Native示例中，通过点击按钮展示了一个引人注目的淡入和淡出效果。动画状态由一个名为“App”的react-native-reanimated管理，它有效地利用了Animated模块来控制图像的不透明度，创建平滑的淡入淡出过渡。当用户按下“淡入”按钮时，图像逐渐出现，而按下“淡出”按钮则会使其逐渐消失。这个交互式演示展示了一个有吸引力的视觉体验，其容器具有圆角、按钮阴影、文本颜色和淡蓝色背景。
// App.js
import React from "react";
import {
View,
Text,
TouchableOpacity,
StyleSheet,
Image,
} from "react-native";
import Animated, {
useSharedValue,
withTiming,
Easing,
useAnimatedStyle,
} from "react-native-reanimated";
const App = () => {
const fadeInOpacity = useSharedValue(0);
const fadeIn = () => {
fadeInOpacity.value = withTiming(1, {
duration: 1000,
easing: Easing.linear,
});
};
const fadeOut = () => {
fadeInOpacity.value = withTiming(0, {
duration: 1000,
easing: Easing.linear,
});
};
const animatedStyle = useAnimatedStyle(() => {
return {
opacity: fadeInOpacity.value, // Use the value directly
};
});
const imageUrl =
"https://media.geeksforgeeks.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png";
return (
<View style={styles.container}>
<Animated.View
style={[
styles.imageContainer,
animatedStyle,
]}
>
<Image
source={{ uri: imageUrl }}
style={styles.image}
/>
</Animated.View>
<TouchableOpacity
onPress={fadeIn}
style={styles.button}
>
<Text style={styles.buttonText}>
Fade In
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={fadeOut}
style={styles.button}
>
<Text style={styles.buttonText}>
Fade Out
</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f0f0f0",
},
imageContainer: {
alignItems: "center",
},
image: {
width: 200,
height: 200,
borderRadius: 10,
},
button: {
marginTop: 20,
backgroundColor: "blue",
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 5,
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.4,
shadowRadius: 4,
elevation: 4,
},
buttonText: {
color: "white",
fontWeight: "bold",
fontSize: 16,
},
});
export default App;
运行步骤
要运行React Native应用程序，请使用以下命令：
npx expo start
- 在Android上运行：
npx react-native run-android
- 在iOS上运行：
npx react-native run-ios
输出：
方法2：使用 react-native-animatable 库
在这种方法中，我们将使用 react-native-animatable 库在 React Native 应用中引入 fadeIn 和 fadeOut 效果。这种技术涉及将所需的组件封装在 Animatable.View 中，并利用 fadeIn 和 fadeOut 等函数。通过按下相应的按钮，这些动画被触发，修改组件的透明度。
要安装 react-native-animatable 库，请使用以下命令
npm install react-native-animatable
package.json
{
"dependencies": {
"react-native-paper": "4.9.2",
"@expo/vector-icons": "^13.0.0",
"react-native-animatable": "*"
}
}
示例： 在这个示例中，‘App’利用带有hooks的功能组件来管理动画状态。通过利用react-native-animatable模块，以一个视觉上吸引人的卡片的不透明度来显示一个标题和段落。当用户点击“淡入”按钮时，他们可以平滑地显示卡片，而点击“淡出”按钮可以使其消失。
// App.js
import React, { useState } from "react";
import {
View,
Text,
TouchableOpacity,
StyleSheet,
} from "react-native";
import * as Animatable from "react-native-animatable";
const App = () => {
const [isContentVisible, setIsContentVisible] =
useState(false);
const fadeIn = () => {
setIsContentVisible(true);
};
const fadeOut = () => {
setIsContentVisible(false);
};
return (
<View style={styles.container}>
<Animatable.View
animation={
isContentVisible ? "fadeIn" : "fadeOut"
}
duration={1000} // 1 second
style={styles.card}
>
<Text style={styles.heading}>
Welcome to Geeksforgeeks!!
</Text>
<Text style={styles.paragraph}>
A Computer Science portal for geeks. It
contains well-written, well-thought, and
well-explained computer science and
programming articles.
</Text>
</Animatable.View>
<TouchableOpacity
onPress={fadeIn}
style={styles.button}
>
<Text style={styles.buttonText}>
Fade In
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={fadeOut}
style={styles.button}
>
<Text style={styles.buttonText}>
Fade Out
</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f0f0f0",
},
card: {
backgroundColor: "white",
padding: 20,
borderRadius: 10,
elevation: 4,
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
shadowRadius: 5,
alignItems: "center",
},
heading: {
fontSize: 20,
fontWeight: "bold",
marginBottom: 10,
color: "green",
},
paragraph: {
fontSize: 14,
textAlign: "center",
paddingHorizontal: 20,
color: "gray",
},
button: {
marginTop: 20,
backgroundColor: "green",
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 5,
},
buttonText: {
color: "white",
fontWeight: "bold",
fontSize: 16,
},
});
export default App;
输出：
