android - 使用 React Native 在 View 上显示 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>)
  }
}

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