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 (
                
                    我是第{i + 1}个View

                
            );
        });

        return (
            
                
                控制图片动画1

                
                控制图片动画2


                
                    
                        我骑着七彩祥云出现了
                    
                
                动画3

                {views}
                动画4
            
        );
    }
}

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