reactjs - 如何将X、Y平移到某个坐标而不是相对点？

Question

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

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

但对于该场景，现有坐标并不重要，我想确保对象移动到屏幕中可能存在的某个点。

额外的限制是，我无法对样式 top、bottom、left 和 right 进行动画处理，因为在 React 中-native，如果我们对这些样式进行动画处理，那么我们就不能使用 useNativeDriver={true} 指令，这会导致性能问题。

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