0

我对 react-native-reanimated v2 很陌生，我有这个用例：

我制作了一个 swipeDeck 组件，用户在其中刷卡并显示下一张。动画被实现并且它们工作。但现在我想添加这个新功能，根据滑动手势的 x.value 翻转下一张卡片（Y 旋转）。

旋转有效，但我想在卡片具有背面背景的情况下添加功能。为此，我看到会有 2 个图像。并且基于旋转Y，不透明度交换导致卡片的视觉翻转。

这是我的代码，一旦我实现了辅助方法const { cond, and, greaterOrEq, lesserThan } = Animated;，应用程序就会崩溃。

我这样做对吗？如果没有，我将如何处理这个问题？我目前的方法基于 2019 年的 YT 视频：https ://www.youtube.com/watch?v=eJtwpjCIRsA&t=3s

这里还有一些片段：

这是底层卡片正面的动态样式。

const nextCardStyle = useAnimatedStyle(() => {    
    const nextCardScale = interpolate(x.value,
      [-dimensions.width / 2, 0, dimensions.width / 2],
      [1, 0.8, 1],
      Extrapolate.CLAMP);
  
    // const nextCardOpacity = interpolate(x.value,
    //   [-dimensions.width / 2, 0, dimensions.width / 2],
    //   [1, 0, 1],
    //   Extrapolate.CLAMP);
    
    const nextCardRotationY = interpolate(x.value,
      [-dimensions.width / 2, -dimensions.width / 5, 0, dimensions.width / 5, dimensions.width / 2],
      [0, 155, 180, 155, 0],
      Extrapolate.CLAMP);

    const nextCardOpacity = cond(and(greaterOrEq(nextCardRotationY, -90), lessThan(nextCardRotationY, 90)), 1, 0);

    return {
      transform: [
        // { perspective },
        { scale: nextCardScale },
        { rotateY: `${nextCardRotationY}deg`}
      ],
      opacity: nextCardOpacity,
    } 
  });

所以基本上每当卡片​​旋转 90 度时，它都需要变得完全透明。并且背面，遵循相同的动画路径，将变得完全不透明。

但是使用这些 v1.xx 方法导入的应用程序崩溃。

4

1 回答 1

0

我为此苦苦挣扎了一会儿，但试图将条件重写为纯 js。您可以只读取插值。

所以

const nextCardOpacity = cond(and(greaterOrEq(nextCardRotationY, -90), lessThan(nextCardRotationY, 90)), 1, 0);

变成：

const nextCardOpacity = nextCardRotationY >= -90 && nextCardRotationY < 90 ? 1 : 0;

这行得通，希望这可以帮助那些在同一件事上苦苦挣扎的人。

于 2021-07-23T10:00:50.693 回答