实现弹出动态气泡对话框

最新推荐文章于 2024-07-12 14:27:53 发布

神奇的小猴子

最新推荐文章于 2024-07-12 14:27:53 发布

阅读量2k

点赞数

分类专栏：动画基础文章标签：动画

本文链接：https://blog.csdn.net/qq_30053399/article/details/52205067

版权

项目中为了创建一个人物设置的动态气泡弹窗，本文将介绍如何在React中实现这一功能。主要步骤包括：在初始化状态中设置动画、在组件挂载后配置动画参数，并在相应组件中应用Animated组件结合样式来完成动画效果。

摘要由CSDN通过智能技术生成

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