Lottie 与 JSON 文件该怎么选
拿到这款扳手加载动效后，你会发现包里同时躺着 .lottie 和 .json 两个文件。很多刚接触 Lottie 的开发者会纠结用哪个。简单来说，.json 是标准的 After Effects 导出格式，兼容性最广，几乎所有主流的 Lottie 播放器都能直接吃透它。而 .lottie 文件本质上是经过压缩的 JSON，体积通常能再缩小 20% 到 30%，并且支持将图片资源打包在一起。如果你的项目对首屏体积锱铢必较，或者动效里包含位图，闭眼选 .lottie；如果是常规的矢量图形，用 .json 最省心，调试起来也方便。
黑白极简的扳手拧紧动效
把这款动画拖进预览器，画面非常干净。主体就是一个扁平化的扳手，正夹着一颗六边形螺母。配色只有纯粹的黑与白，没有任何多余的渐变或阴影。运动逻辑很直白：扳手卡住螺母，顺时针旋转拧紧，然后松开复位，接着进入下一次循环。这种高对比度的单色设计，让它在任何背景色上都能保持极高的辨识度。没有花里胡哨的装饰，就是纯粹的机械咬合感，视觉语言非常克制，刚好契合那种不废话的硬核气质。
首屏加载与降级策略避坑
虽然这款扳手动画的矢量节点很少，文件体积微乎其微，但在实际开发中还是得留个心眼。如果是放在节日活动页的首屏，建议配合懒加载策略，等核心 DOM 渲染完再挂载 Lottie 实例，避免阻塞主线程。另外，千万别忘记做降级处理。有些老旧浏览器或者禁用了 JS 的环境，Lottie 是跑不起来的。最稳妥的做法是准备一张同构的静态 SVG 或 PNG 作为 fallback，用 CSS 的 @keyframes 做个简单的旋转兜底。这样既保证了性能底线，又不会让页面在异常状态下显得太寒酸。
下载后的 5 分钟调试指南
文件下好后别急着写代码，先用官方预览器跑一遍，确认循环逻辑和缓动曲线是否符合预期。接着在代码里试尺寸，这款动效的构图比较居中，建议容器宽度控制在 120px 到 200px 之间，太小了扳手的机械细节会糊成一团，太大了又显得笨重。最后是调循环，默认它是无限循环的，如果是用在提交表单的等待状态，记得在业务逻辑里监听加载完成事件，手动调用 stop() 或 pause() 方法，别让扳手在成功提示出来后还在那儿傻转。