用金杯跃动打造促销焦点

为什么 Lottie 是最佳载体

对于「金杯跃动」这类单主体动效，选择 Lottie 格式能获得显著的性能优势。相比传统的 GIF 或 MP4 视频，JSON 格式的矢量动画不仅体积仅 91KB，极其轻量，而且在任何分辨率的屏幕上都能保持边缘锐利，不会出现模糊的像素锯齿。在游戏结算或电商大促的场景中，这种透明背景的特性意味着你可以随意更换底色，无需担心背景色块与页面视觉冲突。

文件结构与构成

下载的资源包通常包含 .lottie 和 .json 两种格式。其中 .json 是通用的 Web 标准格式，适合大多数开发场景；而 .lottie 则针对移动端（iOS/Android）做了封装优化。在前端代码中引入 lottie-web 库后，通过简单的参数配置就能加载动画。由于「金杯跃动」结构简单，仅包含一个主图层，渲染负担极小，非常适合在列表页或首页作为轻量级的视觉反馈元素。

开发接入的注意事项

在实际接入时，首先要确认容器的宽高比是否匹配原始的 750×1334 画布。如果页面空间有限，建议让设计师导出为正方形或横向的版本以避免留白过多。在 Web 端（Vue/React）中，可以通过监听组件挂载事件来控制动画播放。特别是在移动端 App 中，建议使用懒加载策略，不要让这个 4 秒的循环动画在用户未看到它之前就消耗 CPU 资源。

性能优化与降级方案

尽管「金杯跃动」本身只有 1 个图层，性能压力不大，但在复杂的列表循环中（例如商品排行榜）仍需谨慎。建议将 animationMode 设置为 Loop，并利用 CSS 的 visibility 属性在元素不可见时暂停动画。对于极低端的设备，如果担心 Lottie 解析器的兼容性，可以准备一个静态的奖杯 PNG 作为降级方案，但在大多数现代浏览器上，这种轻量动效是能够丝滑运行的。