009-React-Native-动画基础-可停止动画

欢迎各位同学加入：
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