2

我想在为我的下一个屏幕按下按钮时创建缩小效果，就像从主屏幕按下应用程序并且启动屏幕出现时那样的自定义过渡。

我已经在 stackNavigator 中尝试了 transitionConfig 并使用了带有以下代码的自定义转换

let sharedElementTransition = (index, position,touchPosition, height) => {
const inputRange = [index - 1, index, index + 1];
const outputRange = [0.1, 1, 1];

const opacity = position.interpolate({
  inputRange,
  outputRange: [0, 1, 1],
});

const scale = position.interpolate({
  inputRange:[0, 0.01, 0.99, 1],
  outputRange:[0.3, 0.3, 1, 1],
});

const translateX = position.interpolate({
  inputRange,
  outputRange: [touchPosition.x, 0, 0]
})

const translateY = position.interpolate({
  inputRange,
  outputRange: [touchPosition.y, 0, 0]
})

return {
opacity,
  transform: [
      {scale},
      { translateX },
      { translateY },
  ]
 };
};

我面临的问题是从屏幕中间开始缩放，所以如果我将位置作为屏幕右上角的 (237,16) 传递，我无法让 translateX 和 translateY 正确设置为下一个比例的动画screen 比屏幕尺寸小（我们正在从最后一个屏幕中按下的按钮为下一个屏幕设置动画），因此它的坐标系没有点 (237,16)。

这不是共享元素动画问题，我也尝试了反应导航文档中推荐的https://github.com/fram-x/FluidTransitions，但是在这个（从它的示例中，没有广泛的文档）我的屏幕在 FluidNavigator 下似乎从来没有标题。

4

0 回答 0