文件说明与格式选择
包内包含 .lottie 与 .json 两种标准格式，为不同技术栈的团队提供了灵活的选择。对于现代前端项目，推荐直接使用 .lottie 格式以获得更好的压缩率，减少首屏加载压力；若需兼容旧版播放器或进行深度代码级修改，则选用 .json 格式。两者均保留了完整的矢量特性与图层结构，开发者可根据实际构建工具灵活选用，无需担心格式转换带来的画质损耗或文件体积膨胀问题。
运动逻辑与视觉叙事
动画通过手机横竖屏的切换与底部图标的状态变化来推进叙事。起初手机在横竖屏间轻微摇摆，底部的方向锁定图标呈灰色，暗示当前处于未锁定的错误状态；随后手机定格为竖屏，图标瞬间切换为醒目的橙色并伴随高亮效果。这种「错误状态-正确操作-成功反馈」的三段式循环逻辑，让教学意图一目了然。用户无需阅读冗长的文字说明，仅凭视觉变化即可瞬间理解操作目的，有效降低了认知负荷。
Web 与移动端接入建议
在 Web 端（React/Vue）接入时，建议配合 Lottie-web 库，通过监听动画的完成事件来控制后续弹窗的显示，避免动画与UI层级冲突。在移动端（iOS/Android）原生开发中，可直接使用官方 Lottie 组件，注意将动画设置为循环播放，直到用户完成实际的系统设置操作后再通过代码停止。此外，若遇到低端机型性能瓶颈，可考虑在动画不可见时暂停渲染，以节省CPU资源，确保引导的连贯性与流畅度。
五分钟上手与调参指南
拿到文件后，第一步用浏览器或 Lottie 预览工具检查循环节点是否平滑，确保横竖屏切换时没有生硬的跳帧。建议将动画尺寸控制在屏幕宽度的 60% 至 80% 之间，确保手机轮廓与底部图标清晰可见，同时避免过大导致遮挡核心内容。搭配静态文字说明时，注意留出足够的呼吸空间，避免视觉拥挤，让用户的注意力自然聚焦在橙色高亮图标上。若需调整颜色，可直接在 JSON 文件中修改色值，实现与品牌主题的无缝融合。