构建触觉用户体验：用Lottie致敬有意的设计
内容提要
本文介绍如何用Lottie动画、DOM事件和距离计算构建触觉交互体验，而非依赖物理引擎。作者以数字解压玩具为例，通过径向点击映射、精确帧控制、CSS变量响应式布局及移动端优化（如顺序加载、动态质量调整），实现设计师意图的精准动画反馈，强调技术选型应服务于设计需求。
延伸解读
为何弃用物理引擎
文章指出，物理引擎虽能产生逼真的运动，但无法满足设计师对动画的精确控制需求。作者团队最初尝试使用Matter.js等物理引擎，但发现其生成的随机运动与精心设计的帧序列不符。因此，他们改用Lottie的playSegments()方法，通过程序化控制动画帧，确保每个交互都严格遵循设计师的意图，实现可预测的反馈。
径向点击映射的妙用
通过将点击位置转换为相对于角色中心的坐标，并利用勾股定理计算距离，文章实现了类似飞镖盘的同心圆计分系统。这一方法不仅简化了碰撞检测（无需复杂几何计算），还让爆炸动画精确出现在点击位置，增强了“击中”的触感。这种基于数学的交互设计，既高效又精准，值得借鉴。
移动端性能优化策略
Lottie动画文件较大，为保障移动端流畅性，文章采用了多种优化手段：按顺序加载动画（每次仅加载一对）、动态调整质量（货架动画用50%质量，播放时用100%）、以及销毁并重建爆炸动画以降低内存占用。这些策略在保证视觉质量的同时，有效提升了低端设备的性能表现。
Q&A
如何在不使用物理引擎的情况下实现触觉交互体验？
本文介绍了一种方法，通过Lottie动画、DOM事件和距离计算来实现触觉交互体验，而不是依赖物理引擎。具体来说，使用Lottie的playSegments()方法精确控制动画帧，通过DOM事件监听点击，并用距离计算（如勾股定理）来确定反馈强度和得分。
为什么在构建数字解压玩具时放弃物理引擎？
因为物理引擎产生的是“合理”的运动，但设计师需要的是“有意”的运动。物理引擎无法精确控制动画的每一帧，而设计师精心制作的Lottie动画需要精确的帧序列，例如“mega squeeze”需要181帧的蓄力过程。因此，他们选择程序化状态控制来确保动画的精确性和可控性。
如何通过距离计算实现点击反馈和得分？
首先将点击坐标转换为角色本地坐标，然后计算点击点到角色中心的直线距离（使用Math.hypot）。根据距离划分不同的得分区间，距离越近得分越高。同时，爆炸动画的位置也根据点击向量（a, b）进行定位，确保动画出现在点击位置，增强触觉反馈。
如何通过Lottie的playSegments方法控制动画状态？
每个角色定义了多个动画段（如idle、squeeze1、squeeze2等），存储为帧范围。点击时，通过playSegments()跳转到对应的帧段，并设置loop为false，播放一次后返回idle循环。通过onComplete回调解锁下一次点击，实现顺序播放。
如何利用CSS变量实现响应式布局？
通过监听resize事件，动态设置CSS自定义属性（如--doc-height和--doc-width），布局根据这些变量调整。Lottie SVG在容器内自然缩放，无需处理复杂的碰撞向量和边界框缩放。
移动端性能优化有哪些策略？
包括：1) 使用performance.now()监控加载时间，超过5秒则标记慢连接；2) 顺序加载动画，每次加载一对，避免同时请求过多；3) 动态销毁和重建爆炸动画，降低内存占用；4) 根据角色角色动态调整质量（setQuality）和速度（setSpeed），例如货架上的角色使用50%质量和60%速度，而播放中的角色使用全质量。
Lottie动画在交互中扮演什么角色？
Lottie负责渲染动画，通过其API（如playSegments、setQuality、setSpeed）精确控制动画的播放、帧段和性能。它处理所有挤压、弹跳等视觉效果，而交互层（DOM事件和距离计算）负责触发和反馈，确保动画与用户操作同步。
