使用react-native-reanimated和react-native-gesture-handler(TapGestureHandler)无法正常运行Tap上的视图的动画不透明性

时间:2020-04-14 17:08:37

标签: react-native react-native-reanimated react-native-gesture-handler

我正在学习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>
    );
};

Click on this link to see the issue image.

0 个答案:

没有答案