javascript - 如何在单轴上制作图像动画，即对于水平或垂直轴上的特定旋转

Question

我正在尝试旋转图像，它基本上是为了显示硬币被翻转(硬币 throw 动画)我已将此基本动画应用于图像，但它没有动画，

当我在模拟器上测试时，图像是静止的

这是我的index.android.js 文件:

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  Animated,
  Easing
} from 'react-native';

export default class animateTest extends Component {

  constructor(props) {
      super(props);
      this.spinValue = new Animated.Value(0);
    }

    componentDidMount() {
        this.spin();
      }

    spin() {
      this.spinValue.setValue(0);
      Animated.timing(
        this.spinValue, {
          toValue: 1,
          duration: 1500,
          easing: Easing.linear,

        }
      ).start();
    }

  render() {
    const spin = this.spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '1440deg'],
useNativeDriver: true
});

    return (
      <View style={styles.ViewStyle}>
      <Animated.Image
            style={[
              styles.coinStyle,
               { width: 150,
                 height: 150,
                transform: [
                  { rotate: spin },

                ]
              },
            ]}
             source={require('./Images/Coin_Tail.png')}
             />
      </View>
    );
  }
}
const styles = {
  ViewStyle: {
    flex: 1,
    justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: 'black',
   }
};

AppRegistry.registerComponent('animateTest', () => animateTest);

Answer 1

我知道如何做到这一点

-这只是一个小小的改变，我刚刚在动画中添加了rotateX

这是代码:

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  Animated,
  Easing
} from 'react-native';

export default class animateTest extends Component {

  constructor(props) {
      super(props);
      this.spinValue = new Animated.Value(0);
    }

    componentDidMount() {
        this.spin();
      }

    spin() {
      this.spinValue.setValue(0);
      Animated.timing(
        this.spinValue, {
          toValue: 1,
          duration: 1500,
          easing: Easing.linear,

        }
      ).start();
    }

  render() {
    const spin = this.spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '1440deg'],
useNativeDriver: true
});

    return (
      <View style={styles.ViewStyle}>
      <Animated.Image
            style={[
              styles.coinStyle,
               { width: 150,
                 height: 150,
                transform: [
                  { rotateY: spin },

                ]
              },
            ]}
             source={require('./Images/Coin_Tail.png')}
             />
      </View>
    );
  }
}
const styles = {
  ViewStyle: {
    flex: 1,
    justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: 'black',
   }
};

AppRegistry.registerComponent('animateTest', () => animateTest);