翻转动画 React Navigation V5

Question

我想实现iOS默认翻转动画，如下图

https://github.com/lhandel/react-native-card-flip/blob/master/screenshots/animation.gif

我使用以下代码创建了一个动画，但它与上面的代码不相似，并且给定了要堆叠的配置 transitionSpec

transitionSpec: {
        open: {
          animation: "timing",
          config: {
            duration: 700,
            easing: Easing.ease
          }
        },
        close: {
          animation: "timing",
          config: {
            duration: 700,
            easing: Easing.out(Easing.poly(4)),
          }
        },
      },
      cardStyleInterpolator: ({ current, next }) => {
        return {
          cardStyle: {
            opacity: next
              ? next.progress.interpolate({
                inputRange: [0, 0.5, 1],
                outputRange: [1, 1, 0],
              })
              : current.progress.interpolate({
                inputRange: [0, 0.5, 1],
                outputRange: [0, 0, 1],
              }),
            backfaceVisibility: 'hidden',
            transform: [
              {
                rotateY: next
                  ? next.progress.interpolate({
                    inputRange: [0, 1],
                    outputRange: ['0deg', '180deg'],
                  })
                  : current.progress.interpolate({
                    inputRange: [0, 1],
                    outputRange: ['180deg', '0deg'],
                  }),
              },
              {
                scaleY: next ? next.progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: [1, 0.8],
                }) : current.progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0.8, 1],
                }),
              },
            ],
          },
          overlayStyle: {
            opacity: current.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [0, 1],
            }),
          },
        };
      },

Answer 1

也许这会对您有所帮助。我在 android 上试了一下，动画和你的要求一样。

transform: [
          {
            rotateY: next
              ? next.progress.interpolate({
                inputRange: [0, 1],
                outputRange: ['0deg', '-180deg'],
              })
              : current.progress.interpolate({
                inputRange: [0, 1],
                outputRange: ['180deg', '0deg'],
              }),
          },
          {
            scaleY: next ? next.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [1, 0.7],
            }) : current.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [0.7, 1],
            }),
          },
        ],

翻转动画 React Navigation V5

Flip Animation React Navigation V5

react-native

react-navigation-v5