Open zhulinpinyu opened 7 years ago
使用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);
使用Animate.timing使得hight值在1000ms过程中从100变成150, 使用的动画效果为Easing.bounce