文件说明：.lottie 与 .json 怎么选
素材包里同时包含 .lottie 和 .json 两种文件。简单来说，.json 是最通用的原始数据格式，几乎所有 Lottie 渲染库都能直接读取。而 .lottie 本质上是压缩后的 JSON，去除了多余空白字符，体积更小，解析稍快。实际开发中，若对首屏性能要求极高或需动态下发，优先用 .lottie；若需在代码里直接粘贴数据，或用老版本插件，则用 .json。两者视觉表现完全一致，按工程规范选择即可。对于大多数现代前端项目，直接引入 .lottie 是更省心的选择。
运动逻辑：气泡滑入的节奏拆解
这款动画展示了一个蓝色聊天气泡从右侧滑入，显示“Yeah…”文字。它是典型的单次触发（One-shot）动效，节奏轻快。滑入过程带有轻微弹性缓动，让气泡像是“弹”进屏幕，而非生硬平移。关键变化点在于位移，干脆利落，非常适合表达“确认”或“回复”的即时反馈。若需循环播放，可在代码层设置 loop，但建议只循环 2 到 3 次，避免连续滑入让用户觉得烦躁。在电商 Banner 中，这种单次触发往往比无限循环更显高级。
性能提示：首屏加载与降级策略
聊天气泡这种微交互文件极小，对首屏影响微乎其微。但为追求极致体验，建议放在非关键渲染路径。若用在电商 Banner 角落作装饰，可使用懒加载，等主图渲染完再请求 JSON。此外，需考虑降级方案：在极老旧 WebView 或低端机上，Lottie 可能卡顿。建议在代码中加入加载超时判断，若渲染失败则回退到静态 PNG 气泡图，保证视觉下限且不拖累性能。这种务实的防御性编程思维，能帮你避开很多线上客诉。
5分钟上手指南：预览与调参
下载后第一步先用官方预览工具跑一遍，确认运动轨迹。接着放入设计稿试尺寸，这款气泡在 100px 到 300px 宽度内表现最佳；缩得太小会导致内部文字模糊。最后是调循环和速度。默认单次播放，适合消息提示；若用在活动页视觉焦点，可开启循环，并将播放速度调到 0.8 左右，让滑入动作更柔和，避免抢了主文案风头。调参时记得多切几个机型看看实际表现。