美文网首页React NativeReact NativeReact-Native
009-React-Native-动画基础-可停止动画

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

作者: Time_情书 | 来源:发表于2017-08-12 00:05 被阅读306次

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

    相关文章

      网友评论

        本文标题:009-React-Native-动画基础-可停止动画

        本文链接:https://www.haomeiwen.com/subject/spkdrxtx.html