Question

我的问题是关于在react和/或react-native动画中使用translateX和translateY来将对象动画化到特定点。

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

但是对于这种情况，现有坐标并不重要，我想确保对象移动到屏幕上可能存在的某个点。

另一个限制是，我无法为样式top，bottom，left和right设置动画，因为在本机模式下，如果我们为这些样式设置动画，则不能使用会导致性能问题的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

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

1 个答案: