1
イメージを回転しようとしています。基本的にコインが反転していることを示しています（コイントスアニメーション）I画像には、この基本的なアニメーションを適用しているが、それはアニメーション取得されていない、イメージを1軸、つまり特定の回転の場合、水平軸または垂直軸のアニメーションを作るには
私はこれが私の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);