如何在 reanimated 2 中使用 diffClamp?

问题描述

我试图根据重新激活的 2 useAnimatedScrollHandler 的滚动事件隐藏和显示标题,我需要使用 diffClamp 所以每当用户向上滚动标题时应该比整个滚动事件 contentOffset.y显示的时间更短,但问题是 diffClamp 是我认为来自 reanimated v1 并且我需要使用 useAnimatedStyle 钩子才能reanimated v2 中的动画样式,最后它给出了一个错误

有人可以帮忙吗?

解决方法

const clamp = (value,lowerBound,upperBound) => {
    "worklet";
    return Math.min(Math.max(lowerBound,value),upperBound);
};

const scrollClamp = useSharedValue(0);

const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event,ctx) => {

        const diff = event.contentOffset.y - ctx.prevY;

        scrollClamp.value = clamp(scrollClamp.value + diff,200);

    },onBeginDrag: (event,ctx) => {
        ctx.prevY = event.contentOffset.y;
    }
});

const RStyle = useAnimatedStyle(() => {

    const interpolateY = interpolate(
        scrollClamp.value,[0,200],-200],Extrapolate.CLAMP
    )

    return {
        transform: [
            { translateY: interpolateY }
        ]
    }
})