我正在学习react-native-reanimated和react-native-gesture-handler,并从一个非常简单的示例开始。我只是想用动画切换点击视图的不透明度。我附上问题的GIF(我正面临)和代码。我不确定自己在做什么错。
问题:
未切换视图的不透明度(尝试使视图完全可见时,意味着不透明度:1.当用户将手指快速移出视图时,就会发生此问题-意味着在END和FAILED事件状态下会发生问题。)(并非总是如此)。我注意到一件事,如果我注释掉cond(animState.finished, stopClock(clock))
行,那么一切正常。 请帮助。
const TapGesture = () => {
const gestureState = new Value(-1);
const clock = new Clock();
const animState = {
finished: new Value(0),
position: new Value(0),
time: new Value(0),
frameTime: new Value(0)
};
const config = {
duration: 150,
toValue: new Value(-1),
easing: Easing.linear
};
const onHandleStateChange = event([{
nativeEvent: ({ state }) => {
return block([
set(gestureState, state)
])
}
}]);
const btnOpacity = block([
cond(eq(gestureState, GestureState.BEGAN), [
cond(neq(config.toValue, 0), [
set(animState.finished, 0),
set(animState.frameTime, 0),
set(animState.time, 0),
set(config.toValue, 0),
startClock(clock)
]),
], [
cond(neq(config.toValue, 1), [
debug('-----Gesture state-----', gestureState),
set(animState.finished, 0),
set(animState.frameTime, 0),
set(animState.time, 0),
set(config.toValue, 1),
startClock(clock)
])
]),
timing(clock, animState, config),
cond(animState.finished, stopClock(clock)),
interpolate(animState.position, {
inputRange: [0, 1],
outputRange: [0.2, 1],
extrapolate: Extrapolate.CLAMP
})
]);
return (
<View style={styles.container}>
<TapGestureHandler
maxDurationMs={1000000}
onHandlerStateChange={onHandleStateChange}
>
<Animated.View style={[styles.box, {
opacity: btnOpacity
}]} />
</TapGestureHandler>
</View>
);
};