如何在单轴上（例如，对于特定旋转）在水平或垂直轴上制作图像动画

Question

I am trying to spin an Image it is basically to show that a coin is flipped ( coin Tossing animation ) I have applied this basic animation to the image but it is not getting animated,

The image is stationary while I tested it on emulator

this is my index.android.js file :

 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

I got it how to do this

-it's only a small change I just added rotateX in my animation

here's the code:

 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);