27、动画与 WebSocket 交互技术实践

动画与 WebSocket 交互技术实践

1. 动画取消与行为处理

1.1 取消动画帧

当运行应用程序时，屏幕上的线条会呈现动画效果。为确保在用户同时输入多个命令时动画表现良好，需要处理动画取消的情况。例如，当用户点击重置按钮时，如果当前有命令正在动画中，就需要取消当前动画帧。

以下是具体操作步骤：
1. 在 test/Drawing.test.js 文件底部添加测试：

it("calls cancelAnimationFrame on reset", () => {
  renderWithStore(<Drawing />, {
    script: { drawCommands: [horizontalLine] }
  });
  renderWithStore(<Drawing />, {
    script: { drawCommands: [] }
  });
  expect(window.cancelAnimationFrame).toBeCalledWith(
    cancelToken
  );
});

2. 修改 beforeEach 块，使 requestAnimationFrame 存根返回一个虚拟取消令牌，并为 cancelAnimationFrame 函数添加新的存根：