我需要为我的 React Native 应用程序自定义屏幕转换

Question

我正在制作一个需要多个屏幕转换的应用程序。现在我已经准备好了动画，它正在做我想要的事情，但问题在于屏幕转换开始的地方。例如，我希望屏幕过渡从我点击按钮的那一点开始，就像 Instagram Stories 一样；当您点击 Instagram 故事时，它就会开始从该图像开始动画。

我尝试过共享元素和sharedTransitonTag，但我猜它们是针对屏幕之间常见的图像的。我需要一种算法或其他东西来使这个动画就像 Instagram 故事中一样

这是我的应用程序.tsx

const Stack = createStackNavigator();

const customTransition = {
 transitionSpec: {
 open: {
  animation: 'timing',
  config: {
    duration: 800,
  },
},
close: {
  animation: 'timing',
  config: {
    duration: 300,
  },
 },
 },
 cardStyleInterpolator: ({current, next, layouts}) => {
 return {
  cardStyle: {
    transform: [
      {
        scaleX: current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
        }),
      },
      {
        scaleY: current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
        }),
      },
      {
        translateX: next
          ? next.progress.interpolate({
              inputRange: [0, 0],
              outputRange: [layouts.screen.width, 0],
            })
          : current.progress.interpolate({
              inputRange: [0, 0],
              outputRange: [layouts.screen.width, 0],
            }),
      },
      {
        translateY: next
          ? next.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [layouts.screen.height, 0],
            })
          : current.progress.interpolate({
              inputRange: [0, 0],
              outputRange: [layouts.screen.height, 0],
            }),
      },
    ],
  },
};
},
};

 const AppStack = () => {
 return (
 <Stack.Navigator
  screenOptions={{
    ...customTransition,
    headerShown: false,
    presentation: 'transparentModal',
  }}>
  <Stack.Screen name="Back" component={TabScreens} />
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Story" component={StoryScreen} />
 </Stack.Navigator>
 );
  };

 const App: React.FC = () => {
 return (
  <GestureHandlerRootView style={{flex: 1}}>
  <NavigationContainer>
    <AppStack />
  </NavigationContainer>
  </GestureHandlerRootView>
  );
  };
export default App;

Answer 1

我使用了转换标签，它起作用了。