实现弹出动态气泡对话框

来源：互联网发布：sql to date函数编辑：程序博客网时间：2024/05/17 23:57

上一阶段，项目中需要一个动态的气泡弹窗，弹出某个人设置的话。因为拥戴了九宫格，在这里还是写点东西，来记录一下。
首先，先把动画简单的介绍一下。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>

0 0