推荐开源项目:React Native 动画提交按钮
React Native 的动画提交按钮可以使用 react-native-reanimated
和 react-native-gesture-handler
库来实现。以下是一个简单的例子:
首先,确保安装了必要的库:
npm install react-native-reanimated react-native-gesture-handler
然后,可以创建一个简单的动画提交按钮组件:
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import { TouchableOpacity } from 'react-native-gesture-handler';
const AnimatedSubmitButton = () => {
const progress = useSharedValue(0);
const buttonStyle = useAnimatedStyle(() => ({
opacity: withTiming(progress.value),
transform: [
{
scale: progress.value,
},
],
}));
const handlePressIn = () => {
progress.value = 0.5;
};
const handlePressOut = () => {
progress.value = 1;
};
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPressIn={handlePressIn}
onPressOut={handlePressOut}
>
<Animated.View style={[styles.buttonContent, buttonStyle]}>
<Text style={styles.buttonText}>Submit</Text>
</Animated.View>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
backgroundColor: '#3498db',
padding: 10,
borderRadius: 5,
},
buttonContent: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#2980b9',
borderRadius: 5,
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
});
export default AnimatedSubmitButton;
这个组件使用了 react-native-reanimated
的 useSharedValue
和 useAnimatedStyle
来创建一个简单的按钮按压动画。当按钮被按下时,进度值 (progress.value
) 被设置为 0.5,而当按钮被释放时,进度值被设置回 1,从而触发动画回到正常状态。这个例子展示了如何结合 Reanimated 和手势处理库来创建自定义动画。
评论已关闭