上一阶段，项目中需要一个动态的气泡弹窗，弹出某个人设置的话。因为拥戴了九宫格，在这里还是写点东西，来记录一下。 首先，先把动画简单的介绍一下。React中的动画实现只需要简单的几部就可以了。 1.初始化一个动画（直接在初始化函数中或者构造函数中this.state = {}）； 2.动画需要配置一些参数（componentDidMount()函数中设置参数），多个动画并行或者顺序需要用到map遍历数组； 3.用到动画的地方加上Animated(Animated.View、Animated.Image),并在对应Style中设置具体参数范围；
constructor(props) { super(props); this.state = { //初始化一个淡入淡出的动画 fadeInOpacity: new Animated.Value(0), //初始化一个宽度拉伸的动画 width: new Animated.Value(0), //初始化一个高度拉伸动画 height: new Animated.Value(0), } } componentDidMount() { var timing = Animated.timing; //并行动画，三个动画同时执行 Animated.parallel(['fadeInOpacity', 'width', 'height'].map(property => { return timing(this.state[property], { toValue: 1, duration: 300, easing: Easing.linear }); })).start(); }具体的动画区域：（图片里面包了一句话）
<Animated.Image source={require('../../img/miniGame/bg_challenge_speak.png')} {/*九宫格中的属性，拉伸；图片上方12，左方18，下面13，右边18不动，其他地方可以根据需要拉伸*/} resizeMode = 'stretch' capInsets={{top: 12, left: 18, bottom: 13, right: 18}} style={[{alignItems:'center',justifyContent:'center'},{position:'absolute',left:window_width/2+17,bottom:140}, //具体的动画参数 { opacity: this.state.fadeInOpacity,//淡入淡出直接用上面的0-1 width: this.state.width.interpolate({//宽度拉伸，从0-100 inputRange:[0, 1], outputRange: [0, 100] }), height: this.state.height.interpolate({//高度拉伸0-35 inputRange:[0, 1], outputRange: [0, 35] }), }]}> <Text style={{fontSize:12,color:colors.primaryText,backgroundColor: 'transparent', margin: 10}} maxWidth={100} numberOfLines={2}>{this.state.speak}</Text> </Animated.Image>