react-native - React Native Animated API - 结合翻译和旋转

Question

最近在使用 react native 动画 API 时遇到了这个问题。

如图所示，卡片组件位于左上角，其翻转动画状态由rotateY值控制，移动动画由translateX和translateY值控制。

似乎旋转枢轴点始终设置为卡片的原始位置。移动卡片后（更改 translateX 和 translateY 值），卡片翻转旋转动画参考其原始位置。

有没有办法调整旋转枢轴点？或者，有没有办法为组件的位置设置动画而不是平移？谢谢。

Answer 1

终于搞定了 事实证明，您可以在不使用 translate 属性的情况下为组件位置更改设置动画，方法是向动画值添加侦听器并相应地更新组件状态：

1. 在构造函数中，设置卡片组件初始位置和 cardPos 动画值。

2. 在 componentDidMount 函数中，将侦听器附加到动画值。当动画值改变时，更新组件状态。

3. 在渲染函数中将组件根值样式设置为 position:"absolute" 并且实际位置同步到组件状态中的值。

constructor(props){
  super(props);
  // set card initial position as component state
  this.state = {
      cardPosX: this.props.position.x,
      cardPosY: this.props.position.y
  };
  this.flipAnimatedValue = new Animated.Value(
      this.props.isFacingUp ? 180 : 0
    );
  this.flipAnimatedInterpolate = this.flipAnimatedValue.interpolate({
    inputRange: [0, 90, 180],
    outputRange: ["0deg", "90deg", "0deg"]
  });
  // create animated value for card Position X and Y
  this.cardPosXAnimatedValue = new Animated.Value(this.props.position.x);
  this.cardPosYAnimatedValue = new Animated.Value(this.props.position.y);
}

 componentDidMount() {
    // addListener for cardPos Animated Value
    // when animated values change, update the component state
    this.cardPosXAnimatedValue.addListener(({ value }) => {
      this.setState({ cardPosX: value });
    });
    this.cardPosYAnimatedValue.addListener(({ value }) => {
      this.setState({ cardPosY: value });
    });
 }
 
 render(){
  return (
     <View
          style={{
            width: this.cardWidth,
            height: this.cardHeight,
            position: "absolute",
            top: this.state.cardPosY, //card position sync with animated value
            left: this.state.cardPosX
          }}
        >
        ... //child components
     </View>
  );
 }