react-native-Animated初探

一：
Animated:仅关注动画的输入与输出声明，在其中建立一个可配置的变化函数，然后使用简单的start/stop方法来控制动画按顺序执行！
效果如下：

export default class Anim extends Component{
   constructor(props) {
     super(props);
     this.state = {
       bounceValue: new Animated.Value(0),
     };
   }

 componentDidMount() {
    this.state.bounceValue.setValue(1.5);     
   //可选的动画类型有三种：spring,decay,timing;
    Animated.spring(                         
      this.state.bounceValue,    
    //将bounceValue的值动画化，是一个持续变化的过程         
      {
        toValue: 0.8,                       
        friction: 1,                         
      }
    ).start();                              
  }

  render(){
    return(
    //可选基本组件一般为Image,Text,View
      <Animated.Image                        
        source={{uri: "https://img3.doubanio.com/view/photo/photo/public/p2396117560.jpg"}}
        style={{
          flex: 1,
    //transform是一个有序的数组(动画按顺序执行)
          transform: [                       
            {scale: this.state.bounceValue},
          ]
        }}
      />
      );
  }

}

二：渐变
效果如下：

export default class Anim extends Component{
   constructor(props) {
     super(props);
     this.state = {
        fadeAnim:new Animated.Value(0),
     };
   }

  componentDidMount(){
    Animated.timing(
      this.state.fadeAnim,
      {
        toValue:1,
        duration:3500,
      }
      ).start();
  }

  render(){
    return(
        <Animated.View
              style={{
                opacity: this.state.fadeAnim,
              }}>
            <Image  source={require('./img/a.jpg')} >
            </Image>
            </Animated.View>
      );
  }
}

三：
效果如下：

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>
    );
  }
}


export default class Anim 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}}>

        <CustomButton text="动画:加入插值效果移动"
         onPress={()=>{
           Animated.spring(this.state.anim, {
              toValue: 0,   
              velocity: 7,  
              tension: -20, 
              friction: 3,  
            }).start();
         }}
        />
         <Animated.View
            style={[styles.content, {
              transform: [   
                {scale: this.state.anim.interpolate({
                  inputRange: [0, 1],
                  outputRange: [1, 3],
                })},
                {translateX: this.state.anim.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0, 300],
                })},
                {rotate: this.state.anim.interpolate({
                  inputRange: [0, 1],
                  outputRange: [
                    '0deg', '720deg' 
                  ],
                })},
              ]}
            ]}>
            <Image source={require('./img/a.jpg')} style={{width:50,height:50}}/>
          </Animated.View>


          <CustomButton text="动画:组合动画效果"
            onPress={()=>{
              Animated.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,top,left,right
                   bottom:this.state.compositeAnim
                }]}>
                <Image source={require('./img/a.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',
  },
});