reactnative Animated 插值动画(interpolate)

/**
 * Sample React Native App
 * 
 * @flow
 */
reactnative Animated 插值动画(interpolate)  

三个动画类型:spring,decay和timing。③.三个组件类型:View,Text和Image，
并且另外通过Animated.createAnimatedComponent自定义创建的动画组件。
动画:组合动画效果
Animated.sequence(
import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image,    Animated,    TouchableHighlight,    Easing,} from 'react-native';class CustomButton extends Component {    render() {        return (            <TouchableHighlight                style={styles.button}                underlayColor="#a5a5a5"                onPress={this.props.onPress}>                <Text style={styles.buttonText}>{this.props.text}</Text>            </TouchableHighlight>        );    }}//视图淡入效果class FadeInView extends React.Component {    state: any;    constructor(props) {        super(props);        this.state = {            fadeAnim: new Animated.Value(0), // 透明度为0        };    }    componentDidMount() {        Animated.spring(       // 使用timing / spring / decay过渡动画             this.state.fadeAnim, // 开启动画的值            {                toValue: 400, //结束值                 velocity: 100,                tension: -4,//速度                friction: 3,            }        ).start();             // 开启动画    }    render() {        return (            <Animated.View   // 特殊带有动画的View视图                style={{                width: this.state.fadeAnim,  // Binds 属性动画 width height 等              }}>                {this.props.children}            </Animated.View>        );    }}class AnimatedDemo extends Component {    constructor(props) {        super(props);        this.state = {            show: true,            anim: new Animated.Value(0),            compositeAnim: new Animated.Value(0),        };    }    render() {        return (            <View style={{margin:20}}>                <Text style={styles.welcome}>                    Animated使用实例                </Text>                <CustomButton text="动画:视图淡入效果"                              onPress={()=>{           this.setState((state) => (                    {show: !state.show}            ));        }}                />                {this.state.show && <FadeInView>                    <View style={styles.content}>                        <Image source={require('./8.jpg')} style={{width:50,height:50}}/>                    </View>                </FadeInView>}                <CustomButton text="动画:加入插值效果移动"                              onPress={()=>{           Animated.spring(this.state.anim, {              toValue: 0,              velocity: 7,              tension: -20,              friction: 3,            }).start();         }}                />                <Animated.View                    style={[styles.content, {              transform: [{rotate: this.state.anim.interpolate({ //差值动画                   inputRange: [0, 1], 【 0 -1 】 映射 到 【0-180】                  outputRange: ['0deg','180deg'],                })}              ]}            ]}>                    <Image source={require('./8.jpg')} style={{width:50,height:50}}/>                </Animated.View>                <CustomButton text="动画:组合动画效果"                              onPress={()=>{              Animated.sequence([//sequence 组合动画              Animated.timing(this.state.compositeAnim, {                toValue: 100,                easing: Easing.linear,              }),              Animated.delay(200),              Animated.timing(this.state.compositeAnim, {                toValue: 0,                easing: Easing.elastic(2),              }),              Animated.delay(100),              Animated.timing(this.state.compositeAnim, {                toValue: 50,                easing: Easing.linear,              }),              Animated.timing(this.state.compositeAnim, {                toValue: 0,                easing: Easing.elastic(1),              })              ]).start();            }}                />                <Animated.View                    style={[styles.content, {                   bottom:this.state.compositeAnim                }]}>                    <Image source={require('./8.jpg')} style={{width:50,height:50}}/>                </Animated.View>            </View>        );    }}const styles = StyleSheet.create({    welcome: {        fontSize: 20,        textAlign: 'center',        margin: 10,    },    button: {        margin:5,        backgroundColor: 'white',        padding: 15,        borderBottomWidth: StyleSheet.hairlineWidth,        borderBottomColor: '#cdcdcd',    },    content: {        backgroundColor: 'green',        borderWidth: 1,        padding: 5,        margin: 20,        alignItems: 'center',    },});AppRegistry.registerComponent('myapp', () => AnimatedDemo);