Question

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

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

我的问题是。我能否在某些图书馆的帮助下以某种方式实现它，例如动画片＃39; https://facebook.github.io/react-native/docs/animations.html或者我必须使用＆＃39; plain＆＃39; CSS样式。

什么是良好的实践＆＃39;在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旋转动画。

q1 q2 q3

如果要在特定点附近使用变换。可以尝试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,
  },
});

使用React Native的视图上的3D动画

2 个答案: