三横线变箭头的导航切换动效

一句话定位这款导航动效

这款动画解决的是移动端导航切换时的视觉反馈问题——用户点击菜单按钮后，需要清晰感知当前状态已从「打开菜单」变为「返回上一页」。三横线与箭头的形态转换直观传达功能变化，适合 App 导航栏、侧边栏触发器等场景，设计师和前端开发都能快速集成使用。

运动节奏与形态变化

从预览视频可见，动画在两条形态间流畅切换：三条平行横线收拢变形为向左箭头，再反向展开。运动节奏轻快干脆，没有拖沓的缓动，单次循环完成一次状态切换。深蓝色背景搭配白色图形，对比清晰，小尺寸下依然可辨识。这种双向变形逻辑让同一按钮可复用两种状态，节省界面空间。

不太适合的使用场景

这款动效在两种情况下需谨慎使用：一是页面内容密集、视觉元素繁多的场景，白色图形可能不够突出；二是需要长时间停留的静态展示位，因为它是状态切换动画而非循环装饰，持续播放会让用户困惑当前导航状态。建议仅在用户可交互的导航区域使用。

五分钟上手使用指南

下载后先用 Lottie 预览工具查看实际效果，确认运动速度符合产品调性。建议尺寸范围 24×24 至 48×48 像素，过小会丢失细节。接入时注意触发逻辑——用户点击后播放一次变形，再次点击反向播放。与静态图标相比，Lottie 格式支持代码控制播放方向和速度，便于根据导航状态动态调整。