http://www.alloyteam.com/2016/01/reactnative-animated/

http://www.alloyteam.com/2016/01/reactnative-animated/

/**
 * Created by Administrator on 2016/12/10.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    Animated,
    ScrollView,
    Alert,
    Easing,
    View
} from 'react-native';

class AnimatedDemo extends Component {
    // 構造
    constructor(props) {
        super(props);
        this.state = {
            scale: new Animated.Value(0),

            imgScaleValue: new Animated.Value(0),
            imgRotateValue: new Animated.Value(0),
            imgTranslateXValue: new Animated.Value(0),
            fadeInOpacity: new Animated.Value(0.5),

            rotation: new Animated.Value(0),
            fontSize: new Animated.Value(0),

            animateMaps: [1, 2, 3].map(() => new Animated.Value(0)), // 初始化3個值

        };
        this.state.scale.addListener((value) => {
            console.log("scale",value);  //value.value 為0----0.8
        });
    }

    /*單個動畫*/
    _onPress1 = ()=> {
        this.state.scale.setValue(0);     // 設置一個較大的初始值
        Animated.spring(                          // 可選的基本動畫類型: spring, decay, timing
            this.state.scale,                 // 將`bounceValue`值動畫化
            {
                toValue: 0.8,                         // 將其值以動畫的形式改到一個較小值
                friction: 1,                          // Bouncier spring
            }
        ).start(); // 開始執行動畫
    }
    /*動畫序列*/
    _onPress2 = ()=> {
        this.state.imgScaleValue.setValue(0);
        this.state.imgTranslateXValue.setValue(0);
        this.state.imgRotateValue.setValue(0);
        Animated.parallel([            // 首先執行decay動畫，結束后同時執行spring和twirl動畫
            Animated.spring(this.state.imgTranslateXValue, {
                toValue: 100    // 返回到起始點開始
            }),
            Animated.spring(                          // 可選的基本動畫類型: spring, decay, timing
                this.state.imgScaleValue,                 // 將`bounceValue`值動畫化
                {
                    toValue: 0.8,                         // 將其值以動畫的形式改到一個較小值
                    friction: 1,                          // Bouncier spring
                }
            ),
            Animated.spring(this.state.imgRotateValue, {   // 同時開始旋轉
                toValue: 1
            }),
        ]).start();
    }
    _onPress3 = ()=> {
        /*設置為初始值*/
        ['fadeInOpacity', 'rotation', 'fontSize'].map(property => {
            return this.state[property].setValue(0);
        });
        /*開啟動畫*/
        Animated.parallel(['fadeInOpacity', 'rotation', 'fontSize'].map(property => {
            return Animated.timing(this.state[property], {
                toValue: 1,
                duration: 1000,
                easing: Easing.linear
            });
        })).start();
    }

    _onPress4 = ()=> {
        var timing = Animated.timing;
        Animated.sequence([
                Animated.stagger(200, this.state.animateMaps.map(left => {
                    return timing(left, {
                        toValue: 1,
                    });
                }).concat(
                    this.state.animateMaps.map(left => {
                        return timing(left, {
                            toValue: 0,
                        });
                    })
                )), // 三個view滾到右邊再還原，每個動作間隔200ms
                Animated.delay(400), // 延遲400ms，配合sequence使用
                timing(this.state.animateMaps[0], {
                    toValue: 1
                }),
                timing(this.state.animateMaps[1], {
                    toValue: -1
                }),
                timing(this.state.animateMaps[2], {
                    toValue: 0.5
                }),
                Animated.delay(400),
                Animated.parallel(this.state.animateMaps.map((anim) => timing(anim, {
                    toValue: 0
                }))) // 同時回到原位置
            ]
        ).start();
    }

    render() {

        var views = this.state.animateMaps.map(function (value, i) {
            return (
                <Animated.View
                    key={i}
                    style={[styles.content4, {
                    left: value.interpolate({
                        inputRange: [0,1],
                        outputRange: [0,200]
                    })
                }]}>
                    <Text style={styles.text4}>我是第{i + 1}個View</Text>

                </Animated.View>
            );
        });

        return (
            <ScrollView>
                <Animated.Image                         // 可選的基本組件類型: Image, Text, View
                    source={{uri: 'http://avatar.csdn.net/5/B/3/1_cryhelyxx.jpg'}}
                    style={[styles.img,{
                    transform: [                        // `transform`是一個有序數組（動畫按順序執行）
                            {scale:this.state.scale},  // 將`bounceValue`賦值給 `scale`
                           ]}
                    ]}
                    />
                <Text style={styles.text} onPress={this._onPress1}>控制圖片動畫1</Text>

                <Animated.Image                         // 可選的基本組件類型: Image, Text, View
                    source={{uri: 'http://avatar.csdn.net/5/B/3/1_cryhelyxx.jpg'}}
                    style={[styles.img,{
                    transform: [                        // `transform`是一個有序數組（動畫按順序執行）
                            {scale:this.state.imgScaleValue},  // 將`bounceValue`賦值給 `scale`
                            {translateX: this.state.imgTranslateXValue},
                            {rotate: this.state.imgRotateValue.interpolate({
                                inputRange: [0,1],
                                outputRange: ['0deg', '360deg']
                            })},
                           ]
                           }
                    ]}
                    />
                <Text style={styles.text} onPress={this._onPress2}>控制圖片動畫2</Text>


                <Animated.View style={[styles.content, {
                    opacity: this.state.fadeInOpacity,
                        transform: [{
                            rotateZ: this.state.rotation.interpolate({
                                inputRange: [0,1],
                                outputRange: ['0deg', '360deg']
                            })
                        }]
                    }]}>
                    <Animated.Text style={{
                        color:"red",
                        fontSize: this.state.fontSize.interpolate({
                            inputRange: [0,1],
                            outputRange: [12,26]
                        })
                        }}>
                        我騎著七彩祥云出現了????
                    </Animated.Text>
                </Animated.View>
                <Text style={styles.text} onPress={this._onPress3}>動畫3</Text>

                {views}
                <Text style={styles.text} onPress={this._onPress4}>動畫4</Text>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    text: {
        fontSize: 20,
        textAlign: 'center',
        backgroundColor: "yellow",
        padding: 10,
        margin: 10,
    },
    content: {
        backgroundColor: 'yellow',
        borderWidth: 1,
        borderColor: 'blue',
        padding: 2,
        margin: 20,
        borderRadius: 10,
        alignItems: 'center',
    },
    content4: {
        borderWidth: 1,
        borderColor: 'blue',
        alignItems: 'center',
        backgroundColor: "green",
    },
    text4: {
        fontSize: 20,
        textAlign: 'center',
    },
    img: {
        width: 50,
        height: 50,
        resizeMode: "center",
    },
});
export default AnimatedDemo;

addListener的輸出

Paste_Image.png