使用 Web Animations API 移动包裹卡片：体验播放、暂停与速度更改

关于本文
本文是通过利用生成式 AI 的自动化工作流创建的。我们查阅了 MDN 的 Web Animations API 以及关于减少动画设置的资料，制作了一个操作虚拟包裹卡片的教材。画面采用与普通文章相同的引用方框格式。

验证状态：📘 已确认官方资料与 GitHub 源码 / 未经浏览器实机验证
截至 2026 年 10 月 31 日，Daily Code 的 HTML、JavaScript 与 README 已通过相同的 Git 提交保存并读回。浏览器渲染、操作、GitHub Pages 反映、WordPress 蓝色边框的实际显示以及 Node.js 语法检查尚未实施。

动画并不是“制作完成就结束了”。如果能够控制播放、暂停、从中途恢复甚至更改速度，用户就能自己选择画面的运动方式。在本文中无需添加外部库，仅使用浏览器的标准功能来移动包裹卡片。

本次可实现的功能

首先尝试：移动行李卡片

🔷 试一试
📦 打开 Web Animations API 演示（已公开上线，未验证浏览器行为）
📘 完整源码和 README

1. 在演示页面中“播放”。观察行李是否在左右来回移动。

2. 将速度从“1倍”改为“2倍”，并对比移动速度。

3. “暂停”→“重置”，并查看卡片的位置和状态显示。

这是从代码推导出的预期结果，并非在浏览器中实际确认的结果。

🟦 看这里：不仅要看动效，还要确认文字显示
即使是看起来像视频的动画，通过文字显示当前状态，也能在视觉效果或终端设备不同的情况下确认操作的含义。如果屏幕静止，请首先确认状态栏的提示。

为什么可以通过 JavaScript 控制动画

仅凭普通的 CSS 动画就可以让外观动起来。但是，对于中途停止、重新播放、改变速度等操作，浏览器返回的Animation持有该对象会更容易理解。

Element.animate()会为元素赋予关键帧，并立即开始播放，同时返回用于控制该动画的对象。因此在教材中，在创建后立即pause()来防止自动播放，只有当用户点击“播放”时才play()。the

play()用于播放和恢复，pause()用于中途停止，cancel()用于撤销效果。updatePlaybackRate()用于在与播放位置保持同步的同时改变速度。不过，具体呈现效果会因浏览器实现和设备性能而异。

flowchart LR
    A["再生ボタン"] --> B["Animation.play()"]
    B --> C["カードが移動"]
    D["速度選択"] --> E["updatePlaybackRate()"]
    E --> C
    F["一時停止"] --> G["Animation.pause()"]
    G --> H["状態を文字表示"]

该图是解释事件与API关系的概念图，并不直接代表浏览器内部的具体实现。

代码的核心在于此

const animation = parcel.animate(
  [{ transform: "translateX(0px)" },
   { transform: "translateX(200px)" }],
  { duration: 2600, iterations: Infinity, direction: "alternate" }
);
animation.pause(); // ボタンを押すまで再生しない
// 操作時に animation.play() / animation.updatePlaybackRate(2)

这只是为了便于理解而截取的片段。在完整的代码中，会根据屏幕宽度计算移动距离、获取DOM元素、注册事件并针对特殊环境提供指引。若要单独运行，请使用Daily Code的HTML和JavaScript主体。

尝试修改一处：移动所需的时间

🧪 在实验前进行预测
将JavaScript的duration: 2600更改为duration: 1300，可以预测它将在大约一半的时间内走完相同的移动距离。在保持1倍速度选择不变的情况下进行比较。比较结束后请恢复至2600。

这里重要的一点是，“将时间减半”与“将播放倍率设为2倍”在这次简单的往返示例中会产生相似的速度效果。然而，前者是动画本身的设定时间，后者是播放过程中可以更改的倍率。在实际的UI中，将用户选择的速度与制作者设定的标准时间分开管理会更容易进行说明。

此外，如果在较窄的屏幕上指定固定的 200px 位移，卡片可能会溢出。完成版会根据轨道宽度和卡片宽度来计算移动距离。当屏幕大小改变时，旧的动画会被cancel()中断，并从初始位置重新创建。这可能会被视为一种突然的重置，这也是教程中需要说明的一个规范。

尊重减少动画设置

⚠️ 为了不习惯动画的人
当设备的prefers-reduced-motion: reduce设置启用时，将不会启动动态效果，而是显示文字提示。绝不擅自解除用户所期望的停止状态。

动画并非理解内容所必需的。即使看不到运动的卡片，也要设计成能够传达“准备就绪”、“正在播放”、“已停止”等状态。没有必要让闪烁持续不断，也没有必要放置用户无法停止的效果。本次演示在打开页面时不会自动播放。

在本地计算机上运行

如果无法显示实时演示，请将上述固定提交中的index.html和app.js保存到同一个文件夹中，并首先在浏览器中打开 HTML。这是一个引用相对路径./app.js的结构。

如果本地文件遇到问题，您可以在该文件夹中启动一个本地 HTTP 服务器。

python3 -m http.server 8000 --bind 127.0.0.1

如果在 Windows 上可以使用 Python Launcher，那么使用py -3 -m http.server 8000 --bind 127.0.0.1也可以。在浏览器中打开http://127.0.0.1:8000/，结束时在终端中按下Ctrl+C。无需外部公开设置或管理员权限。

遇到问题时

暂停并不是指“视频文件停止了”，而是指停止了浏览器所管理的动画进程。请不要将加载失败、用户设置导致的停止以及代码异常视为同一种原因。

如何在工作与学习中使用？

这可以应用于任务卡片移动到下一个工序时、希望直观显示处理进度等场景。但是，卡片移动了并不代表服务器端处理成功。在实际的业务工具中，需要分别设计结果API响应、失败时的重试、更新撤销以及向用户发送文本通知。

此外，标准API与GSAP等外部库并不是对立的。像本次这样针对单一元素的基础播放控制，使用标准API很容易上手；而面对多元素复杂视觉效果或制作环境的需求时，第三方库则会派上用场。如果您想减少依赖项，也可以选择从标准API开始尝试。

分别对比播放状态与速度

当播放速度加倍时，预期会在更短的时间内走完相同的移动距离。然而动画不仅包含卡片的位置，还拥有当前的播放时间和播放状态。暂停后恢复的操作与从头重来的操作，其结果是不同的。请一边观察显示的状态，一边对比是从停止位置继续播放还是返回初始位置。

当使用Web Animations API将播放速率设为0时，即使视觉上的运动停止了，内部状态也未必会变成paused。如果将其与在停止按钮中调用pause()的情况区分开来，便能更容易地找出按钮显示与运动不一致的原因。在进行确认时，请分别观察playState和playbackRate，切勿仅凭看不到运动就断定处理已经结束。

如果在更改速度中途播放位置出现不自然的跳跃，请检查更改速度的方法。API 中有一个考虑到播放位置同步的 updatePlaybackRate()，但由于它包含异步处理，仅在修改后立即读取其值可能不足以进行确认。请确认教材的实现使用了哪种方法，并区分它是保持当前位置的同时改变速度，还是在恢复时启用新速度。

在浏览器渲染缓慢的环境中，即使设置了相同的速度，卡片也可能看起来不够流畅。在这种情况下，请不要盲目调高播放速度的值，而是检查开发者工具中是否有报错，以及切换标签页时播放位置发生了什么变化。由于后台限制也会产生影响，因此显示缓慢和动画时间设置错误是两个不同的问题。

如果启用减少屏幕动态的设置，卡片不移动也不一定意味着单纯的故障。这可能是尊重操作系统或浏览器减弱动画设置的结果。请先阅读设置和状态文本，然后再检查控制台。如果要将其应用于业务进度显示，除了移动动画之外，还必须设计通过“准备中”、“已完成”等文字来传达状态。

官方信息与一手信息

• MDN: Element.animate()

• MDN: Animation

• MDN: Web Animations API 的使用方法

• MDN: prefers-reduced-motion

资料确认日期：2026年10月31日。已确认官方API的规格和源码结构，但尚未在实际浏览器中验证所创建画面的运行情况、GitHub Pages发布以及WordPress上的显示效果。

GitHub 示例

• Daily-Code-Samples — Web Animations 行李卡片教材

• 实际运行的 HTML

• JavaScript 完成版

文章正文是用于理解操作与含义的摘录，Daily Code 是用于阅读实现的正式文本。切勿将未执行的测试记录为“成功”。