React native 基于平面列表偏移对本机视图位置设置动画

我想根据主容器平面列表滚动偏移量设置视图（比如abcView）位置的动画。如果用户向下滚动，abcView的位置应按比例移动到底部（当用户向上滚动时，反之亦然）。abcView的位置应与平面列表偏移量成比例变化，而不是一次性变化。我想使用动画API，但需要了解如何进行此操作。

您可以尝试下面的功能组件

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> 

    )
}

函数SomeComponent（）{
const[scrollY]=useState（新的动画.Value（0））；
const translateY=scrollY.interpolate({
输入范围：[0150]，
outputRange:[0150]，
外推：“夹具”，
useNativeDriver：没错，
});
返回(
)
}

您可以尝试以下功能组件

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> 

    )
}

函数SomeComponent（）{
const[scrollY]=useState（新的动画.Value（0））；
const translateY=scrollY.interpolate({
输入范围：[0150]，
outputRange:[0150]，
外推：“夹具”，
useNativeDriver：没错，
});
返回(
)
}

既然你说你需要创意，我想你想要的是视差效果。你可以继续建立自己的库，也可以搜索这样的库，例如

既然你说你需要想法，我想你想要的是视差效应。您可以继续构建自己的库，也可以搜索此类库，例如

您注意到您提供的链接中的浮动操作按钮（+图标）。我想用scroll设置该按钮Y位置的动画。那么您是否尝试过使用@Tuan的答案，即根据FlatList scroll移动Y位置？您注意到您提供的链接中的浮动操作按钮（+图标）。我想用滚动来设置那个按钮的Y位置的动画。那么你有没有尝试过使用@Tuan的答案，即根据平面列表滚动来移动Y位置？