Непрозрачность анимации просмотра при нажатии с использованием обработчика реагировать-родной-реанимированной и обработчика реагировать-родного-жеста (TapGestureHandler) работает неправильно - PullRequest
0 голосов
/ 14 апреля 2020

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

Нажмите на эту ссылку, чтобы увидеть изображение проблемы.

...