欢迎各位同学加入:
React-Native群:397885169
大前端群:544587175
大神超多,热情无私帮助解决各种问题。
import React, {Component, PropTypes} from 'react';
import {
Animated,
ART,
View,
StyleSheet,
Text,
TouchableOpacity,
Easing,
Image
} from 'react-native';
export default class TestAnim extends Component {
static navigationOptions = ({ navigation }) => ({
title : `${navigation.state.params.nameAnimated}`,
});
constructor(props) {
super(props);
this.state = {
imgRotate: new Animated.Value(0),
};
this.isGoing = false; //为真旋转
this.myAnimate = Animated.timing(this.state.imgRotate, {
toValue: 1,
duration: 3000,
easing: Easing.inOut(Easing.linear),
});
}
imgMoving = () => {
if (this.isGoing) {
this.state.imgRotate.setValue(0);
this.myAnimate.start(() => {
this.imgMoving()
})
}
};
stop = () => {
this.isGoing = !this.isGoing;
if (this.isGoing) {
this.myAnimate.start(() => {
this.myAnimate = Animated.timing(this.state.imgRotate, {
toValue: 1,
duration: 3000,
easing: Easing.inOut(Easing.linear),
});
this.imgMoving()
})
} else {
this.state.imgRotate.stopAnimation((oneTimeRotate) => {
//计算角度比例
this.myAnimate = Animated.timing(this.state.imgRotate, {
toValue: 1,
duration: (1-oneTimeRotate) * 3000,
easing: Easing.inOut(Easing.linear),
});
});
}
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.stop}>
<Animated.Image
style={{
width: 140,
height: 140,
marginTop: -180,
alignSelf: 'center',
borderRadius: 140 * 0.5,
transform: [{
rotate: this.state.imgRotate.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
})
}]
}}
source={{uri: "https://img3.doubanio.com/view/photo/photo/public/p2396117560.jpg"}}
/>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
img: {
width: 200,
height: 200
},
doges: {}
});
运行效果:
moving.gif
网友评论