react native 动画2 LayoutAnimation

http://www.jianshu.com/p/3ce1d27fc246

/**
 * Created by Administrator on 2016/12/10.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    Image,
    LayoutAnimation,
    UIManager,
    View
} from 'react-native';

class AnimatedDemo2 extends Component {
    // 构造
    constructor(props) {
        super(props);
        this.state = {
            width: 100,
            height: 100
        };
    }

    _onPress1 = ()=> {
        this.setState(
            {
                width: 100,
                height: 100
            }
        );
        let count = 0;
        let self = this;
        while (++count < 50) {
            requestAnimationFrame(()=> {
                self.setState({
                    width: this.state.width + 1,
                    height: this.state.height + 1
                });
            });
        }
    }
    /*http://reactnative.cn/docs/0.20/direct-manipulation.html*/
    _onPress2 = ()=> {
        let count = 0;
        let self = this;
        while (++count < 50) {
            requestAnimationFrame(()=> {
                self.refs.image.setNativeProps({
                    style: {
                        width: self.state.width++,
                        height: self.state.height++
                    }
                });
            });
        }
    }
    _onPress3 = ()=> {
        LayoutAnimation.configureNext({
                duration: 700, //持续时间
                create: { // 视图创建
                    type: LayoutAnimation.Types.spring,
                    property: LayoutAnimation.Properties.scaleXY,// opacity、scaleXY
                },
                update: { // 视图更新
                    type: LayoutAnimation.Types.spring,
                },
            },
            ()=>{Alert.alert("动画结束");} /*android上不执行*/
        );
        this.setState({width: this.state.width + 100, height: this.state.height + 100});
    }

    _onPress4 = ()=> {
        LayoutAnimation.spring();//相当于 LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
        this.setState({width: this.state.width + 100, height: this.state.height + 100});
    }

    render() {
        return (
            <View >
                <Image
                    ref="image"
                    source={{uri: 'http://avatar.csdn.net/5/B/3/1_cryhelyxx.jpg'}}
                    style={{width:this.state.width,height:this.state.height}}
                    />
                <Text style={styles.text} onPress={this._onPress1}>
                    requestAnimationFrame方式
                </Text>
                <Text style={styles.text} onPress={this._onPress2}>
                    setNativeProps方式
                </Text>
                <Text style={styles.text} onPress={this._onPress3}>
                    LayoutAnimation方式
                </Text>
                <Text style={styles.text} onPress={this._onPress4}>
                    LayoutAnimation2方式
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    text: {
        fontSize: 20,
        textAlign: 'center',
        borderWidth: 1,
        borderColor: "blue",
        padding: 5,
        margin: 5,
    },
});
export default AnimatedDemo2;