Question

我想基于主容器平面列表滚动偏移量为视图的位置（例如abcView）设置动画。如果用户向下滚动，则abcView的位置应成比例地移至底部（当用户向上滚动时，反之亦然）。 abcView的位置应与单位列表偏移量成比例，而不是一口气更改。我想使用动画API，但需要想法如何进行此操作。

Answer 1

您可以尝试以下功能组件

function SomeComponent() {
    const [scrollY] = useState(new Animated.Value(0));

    const translateY = scrollY.interpolate({
        inputRange: [0, 150],
        outputRange: [0, 150],
        extrapolate: 'clamp',
        useNativeDriver: true,
    });
    return (
        <View>
            <Animated.FlatList 
                onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }])}
            />
            <Animated.View
                style={{
                    transform: [{ translateY: translateY }],
                }}
            ></Animated.View>
        </View> 

    )
}

Answer 2

由于您说过需要想法，我想您正在寻找的是视差效果。您可以继续构建自己的库，也可以搜索此类库，例如react-native-parallax-header

根据平面列表偏移量反应本机动画视图位置

2 个答案: