QQ聊天气泡的动画动态效果实现

前言

气泡框作为社交聊天软件的基本功能，想必大家都了解怎么实现了。但是像国内巨头腾讯旗下的QQ气泡(尤其是动态的)我想应该是没有几个。这里就为大家提供一种类似QQ动态气泡的解决方案(还不完善)。

首先用到了一个第三方Lottie, airbnb做的一个专门做动画的东西。专门研究过动画的应该都知道或了解。简单讲就是通过插件将AE中画的动画转换成json文件，然后按照特定规则转换到页面上通过CABaseAnimation来实现。

明确需求

• 基本的聊天气泡，随文本大小变更气泡大小并保证边界圆角等形状不变
• 动态气泡，气泡内容会能动态展示，并根据文本大小，部分动画(如位移)会有区别

lottie分析

一下是一段lottie的json文件，部分删减，源文件可在demo中查看，这里标注上重要字段

{
    "v": "5.1.10",
    "fr": 25,
    "ip": 0,
    "op": 750,
    "w": 128,//画布宽
    "h": 72,//画布高
    "nm": "合成 1",
    "ddd": 0,
    "assets": [//使用的图片资源
        {
            "id": "image_0",
            "w": 26,
            "h": 19,
            "u": "images/",
            "p": "data:image/png;base64,"//图片内容，愿框架不支持网络地址，仅能检索本地文件与base64编码后的内容
        }
    ],
    "layers": [//layer层
        {
            "ddd": 0,
            "ind": 1,
            "ty": 2,
            "nm": "星星.png",
            "cl": "png",
            "refId": "image_0",//使用图片资源id
            "sr": 1,
            "ks": {//位置，大小，缩放等信息
                "o": {
                    "a": 0,
                    "k": 100,
                    "ix": 11
                },
                "r": {
                    "a": 0,
                    "k": 0,
                    "ix": 10
                },
                "p": {
                    "a": 1,
                    "k": [
                        {//数组表示核心桢时的位置
                            "i": {
                                "x": 0.833,
                                "y": 0.833
                            },
                            "o": {
                                "x": 0.167,
                                "y": 0.167
                            },
                            "n": "0p833_0p833_0p167_0p167",
                            "t": 0,
                            "s": [//大小
                                21.375,
                                49.125,
                                0
                            ],
                            "e": [//点位
                                20.5,
                                48.375,
                                0
                            ],
                            "to": [//点位
                                -0.14583332836628,
                                -0.125,
                                0
                            ],
                            "ti": [
                                0.14583332836628,
                                0.25,
                                0
                            ]
                        },
                        {
                            "i": {
                                "x": 0.833,
                                "y": 0.833
                            },
                            "o": {
                                "x": 0.167,
                                "y": 0.167
                            },
                            "n": "0p833_0p833_0p167_0