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

Question

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

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

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

有没有办法调整旋转轴点？或者，有没有办法动画组件的位置而不是翻译？谢谢。

Answer 1

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

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

在componentDidMount函数中

2. ，将侦听器附加到动画值。动画值更改时，更新组件状态。

3. 在渲染功能中将组件根值样式设置为“绝对”，将实际位置同步设置为组件状态中的值。

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>
  );
 }