简洁却不单调的搜索图标动效

为什么选 Lottie

做引导页或搜索功能时，用 GIF 或序列帧总觉得差点意思——文件大、放大就糊、还不好控制播放。这款搜索图标用 Lottie 格式，体积比 GIF 轻不少，矢量特性让它在任何尺寸下都清晰锐利，更重要的是可以通过代码控制播放速度、循环次数甚至暂停，交互灵活性完全不是一个量级。

视觉特征

这款动画的主体是一个放大镜图标，采用了 Google 标志性的四色分段设计——红、黄、绿、蓝四种颜色沿着圆形手柄分布。运动方式是平滑的循环旋转，节奏适中不抢戏。整体风格简约扁平，色彩鲜明但不过分张扬，科技感与亲和力平衡得不错，放在白色或浅色背景上效果最佳。

Web 与移动端

前端同学用 React 或 Vue 项目可以直接引入 lottie-web，配置 autoplay 和 loop 参数即可；移动端 iOS 用 Lottie-iOS，Android 用 Lottie-Android，接入流程都挺成熟。需要注意的是首屏加载时建议懒加载，避免影响页面渲染速度；另外不同平台对 JSON 文件的解析性能略有差异，真机测试时留意一下帧率。

5分钟上手指南

下载后先用浏览器打开 JSON 文件预览效果，确认动画符合预期；然后在项目中测试 48×48、64×64 等常用尺寸，看清晰度是否满足需求；如果觉得旋转过快或过慢，可以通过 speed 参数调整播放速率；最后检查深色背景下的显示效果，必要时加个白色底板或调整图层混合模式。