Я изучаю реакцию-родной-реанимированный и реагирующий-родной-жест-обработчик и начал с очень простого примера. Я просто пытаюсь переключить непрозрачность вида при нажатии на него с помощью анимации. Я прилагаю 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>
);
};
Нажмите на эту ссылку, чтобы увидеть изображение проблемы.