Building Tactile UX: Honoring Intentional Design With Lottie

// 角色在自身坐标空间中的中心点
var x_center = parseFloat($("#playChar").width()  / 2);
var y_center = parseFloat($("#playChar").height() / 2);

// 相对于角色左上角的点击位置
var offset = $("#playChar").offset(); // 文档相对位置
var X = parseFloat(e.pageX - offset.left);
var Y = parseFloat(e.pageY - offset.top);

// 从中心到点击点的向量
var a = parseFloat(X - x_center);
var b = parseFloat(Y - y_center);

var distance = Math.hypot(a, b);

// 距离区域映射到得分奖励
if      (distance < 10)  givePts = 100; // 十字准星区域
else if (distance < 40)  givePts = getRndInteger(70, 90);
else if (distance < 70)  givePts = getRndInteger(40, 70);
else if (distance < 100) givePts = getRndInteger(20, 40);
else if (distance < 120) givePts = getRndInteger(10, 20);
else if (distance < 145) givePts = getRndInteger(1,  10);
else givePts = 0; // 未命中

// 将爆炸 Lottie 精确定位到点击点
var shiftPosition = window.innerWidth < 1023 ? -20 : 200;
$("#explosionChar").css({
  "margin-left": a + shiftPosition + "px",
  "margin-top":  b + shiftPosition + "px",
});

// 立即触发压缩动画
explosion.goToAndPlay(0);

// 每个角色定义的动画片段帧范围
const play_segments = [{
  charId: 0,
  sections: {
    idle:     [0,  40],   // 空闲循环状态
    squeeze1: [41, 80],   // 轻度反应
    squeeze2: [81, 120],  // 中度反应
    squeeze3: [121, 160], // 重度反应
  },
  playOrder: ["squeeze1", "squeeze2", "squeeze3"],
  endAnimation: [161, 200]
}];

function stepAnim() {
  let p         = play_segments[0];
  let i         = p["playOrder"][curr_order_play];
  let playNow   = p["sections"][i];

  playChar.stop();                    // 立即停止当前片段
  playChar.loop = false;              // 不循环 - 仅播放一次后停止
  playChar.playSegments(playNow, true); // 跳转到精确帧，强制立即播放

  curr_order_play++;
  canPlayAnim = 0;                    // 动画中禁止其他点击

  if (curr_order_play > p["playOrder"].length - 1) {
    curr_order_play = 0;              // 循环回到序列开头
  }
}

playChar.onComplete = function() {
  canPlayAnim = 1;          // 重新启用点击
  if (!playEnd) playIdleState();
};

function playIdleState() {
  playChar.playSegments([0, 40], true); // 返回空闲循环
  playChar.loop = true;
}

// 循环"准备释放"帧直到玩家激活
indikL.loop = true;
indikL.playSegments([181, 302], true);

// 激活时 - 播放释放序列一次
indikL.loop = false;
indikL.playSegments([96, 396], true);
indikL.goToAndStop(0, true); // 完成后强制重置

const appHeight = () => {
  const doc = document.documentElement;
  doc.style.setProperty("--doc-height", `${window.innerHeight}px`);
  doc.style.setProperty("--doc-width", `${doc.clientWidth}px`);
};
window.addEventListener("resize", appHeight);
appHeight(); // 初始化时立即运行

Lottie JSON 文件可能体积较大。我们有 21 个不同的角色动画，加上多个需要加载的爆炸变体。为确保体验保持流畅——尤其是在移动设备上——我们实施了若干激进的优化策略：

- 连接监控：我们使用 performance.now() 跟踪初始资源加载时间，以检测慢速连接并在加载时间超过 5 秒时进行标记。

- 顺序加载资源：我们没有同时初始化所有 21 个角色动画，而是使用 await 按对加载，仅在每对加载完成后才继续。这可防止低端设备上同时的网络请求和渲染工作造成浏览器阻塞。

- 激进的内存管理：我们没有将占用内存较大的爆炸动画保留在内存中，而是根据需要实时销毁并重新创建它们。这以微小的初始化成本换取了更低的空闲内存占用。

- 动态降低画质：画质降低是一个 API 调用，会在每个货架角色加载后立即应用。关键在于根据角色在场景中的作用应用不同的画质级别：

## 结论：为设计选择合适的技术

在确定游戏化网页体验的技术栈时，关键是要让设计需求主导技术选择。

“Mega Squeeze” 状态结合了分层动画序列、背景过渡和定时交互反馈，以增强冲击感。（大预览图）

由于我们的交互需要定制的、高度可控的视觉反应，我们选择了程序化状态控制而非涌现式模拟。这一决定使动画师能够完全掌控体验的触感，让代码专注于其最擅长的工作：监听、计算和触发。

> 通过将 Lottie 本机时间轴功能映射到 DOM，您可以在保持对艺术方向绝对控制的同时，提供极其丰富的触觉用户体验。

### 进一步资源

想亲自尝试实现，或在浏览器中体验实际效果？查看这些资源：

- 体验代码：我们在 CodePen 上准备了一个简化版演示示例，展示角色如何通过 playSegments() 对点击做出反应。

- 查看最终成果：访问 Stress Release 网站的实时版本，查看所有 21 个角色和优化策略的实际应用。

- 阅读文档：探索 Lottie Web 官方文档，了解我们使用的播放器控制功能。特别关注 loadAnimation()、playSegments()、setSpeed() 和 setQuality() —— 这四个方法构成了本文所述交互层的核心。

(yk)

探索更多内容