反应像Tinder这样的本机滑动卡-动画不起作用

Question

我正尝试在反应原生上创建动画来刷卡 tinder 之类的动画。因此，我可以向左滑动卡来表示不喜欢，向右滑动卡来表示喜欢，向上滑动以表示超级喜欢。

卡片动画已经在起作用，但是卡片上的图标应该一次出现一个，并且这没有发生。向上滑动时，会显示星标，如果不释放卡并向左滑动，则一切正常，星标消失，关闭图标。但是当我向上滑动并拉紧时，开始和心脏图标会同时显示。

下面是向右，向左和向上滑动的代码：

const handleSwipeLeftOpacity = () => {
const swipeLeftOpactiy = pan.x.interpolate({
  inputRange: [-SCREEN_WIDTH, imageOrigin.x],
  outputRange: [1, 0],
});

return swipeLeftOpactiy;

};

const handleSwipeRigthOpacity = () => {
const swipeRightOpacity = pan.x.interpolate({
  inputRange: [imageOrigin.x, SCREEN_WIDTH],
  outputRange: [0, 1],
});

return swipeRightOpacity;

};

const handleSwipeTopOpacity = () => {
    const swipeTopOpacity = Animated.subtract(pan.y, pan.x).interpolate({
      inputRange: [-SCREEN_WIDTH, imageOrigin.x],
      outputRange: [1, 0],
      extrapolate: "clamp",
    });

    return swipeTopOpacity;
  };

我只需要为 handleSwipeTopOpacity 方法找到正确的插值。返回值可显示星形图标

的不透明度