react native 动画1 animated

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