如何将translateX、translateY转换为特定坐标而不是相对点？

Question

我的问题是关于在React和/或React Native动画中使用translateX和translateY，以将对象动画到某个点。

这两个转换是相对于现有点移动对象。

但在此场景中，现有坐标并不重要，我想确保对象移动到屏幕上的特定点，而无论其在哪里。

附加限制是，我无法动画化样式top、bottom、left和right，因为在React Native中，如果我们动画化这些样式，就不能使用指令useNativeDriver={true}，这会导致性能问题。

- Mehmet Kaplan

---

请展示一下你目前为止尝试过的内容。 - Vencovsky

我所做的是使用 react-native-animatable 在 react-native 中完成的。我想要使用上和左的值进行动画（与问题无关，因此未在此处粘贴）。就像这样： this.refsInSpace[i][j].transitionTo({top: c_footerHeight + (i+1) * this.squareEdge, left: j * this.squareEdge,}, 1000); 结束消息如下： 错误：本地动画模块不支持样式属性'left'。 对于运动，似乎我需要使用 transformX 和 transformY，这点在问题中会涉及到，它们是相对运动。 - Mehmet Kaplan

Answer 1

你可以使用onLayout属性来获取任何View组件相对于父元素的位置、高度和宽度。

像下面这样做应该可以。根据您当前的结构，您可能需要获得更多父级View组件的位置。

componentDidMount() {
  this.animatedValue = new Animated.Value(0);  
}

animate() {
  const { parentYPosition } = this.state;
  Animated.Timing(this.animatedValue, {
    toValue: FINAL_POSITION - parentYPosition
  }).start(); 
}

render() {
  return (
    <View 
      onLayout={event => {
        const { y } = event.nativeEvent.layout;
        this.setState({parentYPosition: y})
      }}
    >
      <Animated.View 
        style={{
          position: 'absolute',
          top: 0, 
          transform: [
          {
            translateY: this.animatedValue
          }
      />
    />
  );
}

https://facebook.github.io/react-native/docs/view#onlayout

- Erik Haider Forsén

---

我用你提供的代码生成了一个小程序 https://snack.expo.io/@mehmetkaplan/af32ac 。我无法理解的是，它如何移动到绝对位置？尽管它考虑了父级坐标，但它并没有处理自己的坐标。正如您在带有注释“// CHANGING THIS VALUE THE FINAL ANIMATED POINT CHANGES”的小程序中所看到的那样，它转到相对点。问题的要点是不使用动画来将其移动到绝对点，而不考虑初始坐标，也不使用top, bottom, left, right 样式。 - Mehmet Kaplan

答案仅包括您遇到问题的部分，即如何计算动画的最终值。它不是一个完整的可运行类，更像是一些伪代码来帮助您入门。在博览会中，您缺少一个运行动画的函数。答案涉及到“您的问题的要点”，并不是为您提供一个完整的可运行类，而是帮助您将动画变成一个绝对点，我现在已经告诉您如何做到这一点了。 - Erik Haider Forsén

抱歉，Erik，我没有理解的是，你提供的代码导航到相对坐标，而不是屏幕上的确切点。在这种情况下，仅使用translateY是等效的。可能的解决方案应该知道视图之前的位置，并相应地找到translateY值。但是，该代码只知道“父级在哪里”，而不知道实际视图本身的位置。 - Mehmet Kaplan

除非父级有内容，否则子级与父级具有相同的位置。一个简单的解决方案是创建一个仅有一个子元素（即Animated.View）的父级，然后在Animated.View上使用样式position: absolute, top: 0，然后动画化translateY值。在这种情况下，您将实现所需的效果，并且可以使用本地驱动程序。 - Erik Haider Forsén

谢谢，现在我明白了。让我今天试一下这个方法。 - Mehmet Kaplan

我认为这个问题有点棘手，如果我连续动画几次，由于父级不会被动画化，所有的动画（除了第一个）都将具有错误的坐标。我的想法正确吗？ - Mehmet Kaplan