[React Native] Animate.timing

使用Animate.timing使得hight值在1000ms过程中从100变成150，使用的动画效果为Easing.bounce

import React, { Component } from 'react';
import {AppRegistry, View, StyleSheet, Animated, Easing } from 'react-native';

export default class animatedbasic extends Component {
  componentWillMount() {
    // init value is 100
    this.animatedValue = new Animated.Value(100);
  }
  componentDidMount() {
    //target value is 150, duration time is 1000ms, 动画效果是：Easing.bounce
    Animated.timing(this.animatedValue, {
      toValue: 150,
      duration: 1000,
      easing: Easing.bounce
    }).start()
  }

  render() {
    // 使用这个变化的值作为height
    const animatedStyle = { height: this.animatedValue }
    return (
      <View style={styles.container}>
        <Animated.View style={[styles.box, animatedStyle]}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  box: {
    backgroundColor: "#333",
    width: 100,
    height: 100,
  }
})

AppRegistry.registerComponent('animatedbasic', () => animatedbasic);

zhulinpinyu / zhulinpinyu.github.io

[React Native] Animate.timing #2