摘要

  • W3C 2013 年首份 Web Animations 公开草案尝试把 CSS 过渡、CSS 动画与 SVG 动画共有的计时和效果行为放进同一个模型。
  • 2014 年草案给这个模型配上脚本接口，由浏览器执行已创建的动画；2023 年文档详述当前时间、播放状态、暂停、倒放、结束和取消的规则。

后台有点乱。一个图形靠 CSS 过渡登场，一个用 CSS 关键帧绕圈，第三个沿 SVG 的路径走。观众只问一句：“能回到刚才那个画面吗？”编辑却需要为三类动作翻找不同的计时概念。若再给每个图形配一只 JavaScript 秒表，编辑不仅要写讲解，还得兼职舞台计时员。动画变成可供读者操控的解释工具之前，时间这件事得先有一套共同语言。

W3C 2013 年 6 月 25 日首份公开草案 就从这个结构问题出发。CSS 过渡、CSS 动画和 SVG 动画都能造出运动，许多特征相似，描述方式却不相同。Web Animations 提出覆盖共同部分的抽象模型：时间线供给时间，活动区间界定何时生效，效果算出中间状态，多种效果还可以组合。模型负责说明“运动怎样运转”；网页作者仍决定观众为什么要看它。

2014 年 6 月 5 日草案 又把分工说得更具体：抽象模型与供脚本使用的接口并列。脚本可以创建动画，创建后由浏览器执行。网页不必让回调函数在每一帧亲自算位置、亲自上色。草案还说明它与 requestAnimationFrame 如何共享时间值和执行顺序。浏览器保管钟表的机械部分，作者可以在讲解需要时决定启动、停住或改变播放方式。

把暂停键放进文章里，并不只是给读者一点玩具。有人读到网络路径示意图的中段，想停下来辨认箭头；有人回看上一步，想知道数据从哪里来。若网页能可靠地问“动画现在走到哪一刻”，它就能给读者一个可重访的画面。共同模型把当前时间、速度和状态变成可讨论的对象，不用每一种运动重新发明控制台。

2018 年 10 月 11 日 Level 1 草案 继续整理时间线、动画对象和效果之间的关系。效果描述什么会变，时间线提供进度，播放状态说明它在运行、等待、暂停还是已经结束。编辑可以修改速度或方向，而不必每帧重画图形。观众看到的是顺滑倒放，背后靠的是“此刻”有一套一致的定义。没有这层定义，倒放键很容易变成跳剪键。

2023 年 6 月 5 日草案 对控制台写得更细：设置当前时间和开始时间，播放与暂停，结束与取消，播放速率及反向播放，还有准备就绪和结束时的状态处理。之所以要写这么细，是因为按下暂停键时，动画可能还在启动，也可能刚要结束，甚至正在改速。网页作者提出动作，浏览器必须确定舞台此时该呈现哪一帧。读者看到的一秒钟，规范里可能要处理好几个拐弯。

W3C 发布记录 标出 2013、2014、2018 和 2023 年的公开版本。这条线讲的是 CSS 与 SVG 动画如何共享时钟、脚本如何触碰播放控制；滚动位置后来可以提供另一种进度来源，那是另一段故事。编辑仍要判断哪些运动真的帮助理解，何时给读者暂停和倒放。浏览器把钟表走准，三位舞台工人终于不用各举一只秒表。