011-React-Native-动画基础

欢迎各位同学加入：
React-Native群：397885169
大前端群：544587175
大神超多，热情无私帮助解决各种问题。

基础：Animated，AnimatedXY
AnimatedBouncePage.js

export default class AnimatedBouncePage extends Component {
    static navigationOptions = ({ navigation }) => ({
        title: `${navigation.state.params.nameAnimated}`,
    });

    constructor(props){
        super(props);
        this.state = {
            bounceValue: new Animated.Value(0.1),
        };
    }

    componentWillMount(){
        this.state.bounceValue.setValue(1.5);
            //值的变化类似于弹簧，是一个渐变的过程
            Animated.spring(
                this.state.bounceValue,
            //将bounceValue的值动画化，是一个持续变化的过程
                {
                    //动画执行完毕后Animated.Value的值
                    toValue: 1,
                    friction: 1,
                    tension:40,
                }
            ).start((completed)=>{
                //completed，completed是{finished: true}，completed是{finished: false}
                //动画完成后，执行回调
                this.props.navigation.goBack();
            });

    }

    render(){
        return(
            <View style={styles.container}>
                <Animated.Image
                    source={{uri: "https://img3.doubanio.com/view/photo/photo/public/p2396117560.jpg"}}
                    style={{
                            width:Dimensions.get('window').width,
                            height:Dimensions.get('window').height-64,
                            transform: [{scale: this.state.bounceValue}]
                    }}
                />
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems:'center',
    },
});

AnimatedXYMovePage.js

export default class AnimatedXYMovePage extends Component {
    static navigationOptions = ({ navigation }) => ({
        title: `${navigation.state.params.nameAnimated}`,
    });

    constructor(props){
        super(props);
        this.state = {
            trans : new Animated.ValueXY({
            x: Dimensions.get('window').width/2,
            y: Dimensions.get('window').height/2,
        })};
    }

    componentWillMount(){
        Animated.timing(this.state.trans, {
            toValue: {
                x : -Dimensions.get('window').width/2,
                y : -Dimensions.get('window').height/2,
            },
            duration: 2000,
            delay: 1000
        }).start((completed)=>{
            //动画执行结束后两秒，跳转回原页面
            this.timer = setTimeout(()=>{
                this.props.navigation.goBack();
            },2000);
        });
    }


    componentWillUnmount() {
       this.timer&&clearTimeout(this.timer);
    }

    render(){
        return(
            <View style={styles.container}>
                <Animated.Image
                    source={{uri: "https://img3.doubanio.com/view/photo/photo/public/p2396117560.jpg"}}
                    style={[{ width:Dimensions.get('window').width,
                              height:Dimensions.get('window').height-64,},{transform: this.state.trans.getTranslateTransform()}]}
                />
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems:'center',
    },
});

运行效果：

anim.gif