简洁明快的展开动画，按钮交互的清爽反馈

一句话看懂这款动效

Expand 是一款极简的容器展开动画，用横向扩展的运动语言传递「展开」「更多」「详情」等交互信号。从预览视频可以看到，一个带箭头的矩形框从紧凑状态平滑扩展到更宽的形态，整个过程干脆利落，没有多余的装饰。这种克制的动效气质特别适合需要快速反馈的按钮场景，既不会抢夺用户注意力，又能明确传达状态变化。

文件格式与集成要点

这款动画提供 Lottie (.lottie) 和 JSON 双格式，都是矢量透明底文件。相比 GIF，它的优势很明显：文件体积更小、放大不失真、可以编程控制播放速度和循环次数。前端开发接入时，无论是 Web 端的 Lottie-Web，还是移动端的 Lottie-Android/iOS，都能直接调用 JSON 文件，无需额外切图。

最适合的3个使用场景

第一，按钮点击反馈——当用户点击「查看更多」「展开详情」类按钮时，这个动效能即时呼应操作。第二，卡片式列表——在信息流或设置页中，点击卡片展开更多内容时作为过渡动画。第三，导航菜单——侧边栏或下拉菜单的展开收起，用这个动效保持界面节奏的一致性。

设计师使用清单

适合：需要轻量级反馈的按钮交互、卡片展开收起、菜单过渡。不适合：需要强烈视觉冲击的营销页、复杂的状态切换。搭配建议：与静态图标或文字组合使用时，注意动效时长控制在 300-500ms 之间，避免过快导致用户看不清变化。一个调参技巧：在深色背景上使用时，可以适当提高边框颜色的对比度，确保动效可见性。