使用 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>)
  }
}

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

Answer 2

使用 Animated api 进行这些转换。

注意：沿轴旋转（即rotateX 或rotateY）与透视图会给你翻转的感觉。

始终使用 useNativeDriver: true 以获得更好的性能。

示例代码：

import React, {Component} from 'react';
import {View, Animated, StyleSheet, Button} from 'react-native';

export default class Container extends Component {
  constructor() {
    super();
    this.animation = new Animated.ValueXY({x: 0, y: 0});
    const inputRange = [0, 1];
    const outputRange = ['0deg', '180deg'];
    this.rotateX = this.animation.x.interpolate({inputRange, outputRange});
    this.rotateY = this.animation.y.interpolate({inputRange, outputRange});
  }
  flip = (val) => {
    this.animation[val].setValue(0);
    Animated.timing(this.animation[val], {
      toValue: 1,
      duration: 500,
      useNativeDriver: true,
    }).start();
  };
  render() {
    const {rotateX, rotateY} = this;
    return (
      <View style={styles.container}>
        <Animated.View
          style={{
            ...styles.item,
            transform: [{rotateX}, {rotateY}, {perspective: 500}],
          }}
        />
        <Button title="flip x " onPress={() => this.flip('x')} />
        <Button title="flip y " onPress={() => this.flip('y')} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {flex: 1, alignItems: 'center', justifyContent: 'center'},
  item: {
    height: 200,
    width: 200,
    backgroundColor: 'red',
    marginBottom: 20,
  },
});