使用React Native观看3D动画

Question

我想在我的React Native应用中实现翻转效果，类似于此处所述：

https://www.codementor.io/reactjs/tutorial/building-a-flipper-using-react-js-and-less-css

我的问题是。我可以在某些库（例如“动画”）的帮助下以某种方式实现它吗？https://facebook.github.io/react-native/docs/animations.html还是必须使用“普通” CSS样式。

React Native中的此类动画的“良好表现”是什么？

class CardBack extends Component {
  render() {
    return (
      <TouchableOpacity onPress={this.flip}>
        <View style={styles.scrumCardBorder}>
          <View style={styles.cardBack}>
          </View>
        </View>
      </TouchableOpacity>
    );
  }

  flip() {
    this.setState({flipped: !this.state.flipped})
  }
}

class CardFront extends Component {
  render() {
    return (
      <TouchableOpacity>
        <View style={styles.scrumCardBorder}>
          <View style={styles.cardFront}>
            <Text style={styles.cardValue}>5</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

Answer 1

我们可以使用transform和Interpolate来制作3D旋转动画。

class RotateAnimation extends React.Component {
  _rotateValue = new Animated.Value(0);
  startAnimated = () => {
    Animated.timing(this._rotateValue, {
      toValue: 360,
      duration: 800, 
      useNativeDriver: true 
    }).start()
  }

  getTransform = () => {
    const rotate = this._rotateValue.interpolate({
      inputRange: [0, 180, 360], 
      outputRange: ['0deg', '180deg', '360deg'], 
      extrapolate: 'clamp',
    }) 
    if (this.props.horizontal) {
      return {
        transform: {
          perspective: WINDOW_WIDTH, 
          rotateX: rotate
        }
      }
    }

    return {
      transform: {
        perspective: WINDOW_WIDTH, 
        rotateY: rotate
      }
    }
  }

  render() {
    return  (<Animated.View style={[style, ]} />
      {this.props.children}
    </Animated.View>)
  }
}

如果你想在某个点周围使用变换。可以试试这个。