推荐项目:react-native-animation-hooks - 轻松实现React Native动画的钩子库
import React, { useCallback } from 'react';
import { Animated, Text, TouchableOpacity } from 'react-native';
import { useAnimatedValue, useSharedValue, withTiming } from 'react-native-animation-hooks';
const App = () => {
const scale = useSharedValue(1);
const rotate = useAnimatedValue(0);
const animate = useCallback(() => {
scale.value = withTiming(1.2, { duration: 200 });
rotate.value = withTiming((rotate.value + 360) % 360, { duration: 500 });
}, []);
return (
<TouchableOpacity onPress={animate}>
<Animated.View
style={{
transform: [{ scale: scale.value }, { rotate: rotate.value + 'deg' }],
}}
>
<Text>Press Me!</Text>
</Animated.View>
</TouchableOpacity>
);
};
export default App;
这个例子展示了如何使用react-native-animation-hooks
库中的useSharedValue
和withTiming
来创建一个简单的按压放大和旋转的动画。当用户点击屏幕时,视图会放大并旋转。这个例子简洁明了,并且教会了如何在React Native中使用动画钩子。
评论已关闭