Smashing Animations Part 3: SMIL 并未消亡，宝贝，SMIL 依然活跃

虽然 CSS 动画有很多方式可以让设计变得生动，但在 SVG 中添加简单的 SMIL（同步多媒体集成语言）动画可以让它们做得更多。Andy Clarke 解释了 SVG 中的 SMIL 动画在 CSS 力所不及的地方如何发挥作用。

SMIL 规范由 W3C 于 1998 年推出，用于同步多媒体。这远在 CSS 动画或基于 JavaScript 的动画库出现之前。它内置在 SVG 1.1 中，这就是为什么我们今天仍然可以在那里使用它。

现在，你可能听说过 SMIL 已经消亡。然而，自从谷歌大约十年前撤销了弃用该技术的决定后，它依然活跃且良好。对于希望使用简单、语义化方式为设计添加动画的设计师和开发者来说，它仍然是一个绝佳的选择。

构建动画

<animate> 只是 SVG 中几个动画元素之一。与 attributeName 值一起，它可以基于元素的一个或多个属性启用动画。

大多数动画解释从移动一个基本形状开始，比如这个令人兴奋的圆形：

1
2
3
4
5
6
7

<circle
  r="50"
  cx="50" 
  cy="50" 
  fill="#062326" 
  opacity="1"
/>

使用这个 attributeName 属性，我可以定义要动画化这个圆的哪个属性，在这个例子中，是它的 cx（x 轴中心点）位置：

1
2
3

<circle ... >
  <animate attributename="cx"></animate>
</circle>

单独使用这个，它什么也不做，直到我定义另外三个值。from 关键字指定圆的初始位置，to 指定其最终位置，以及 dur-ation 指定这两个位置之间的持续时间：

1
2
3
4
5
6
7
8

<circle ... >
  <animate 
  attributename="cx"
  from="50" 
  to="500"
  dur="1s">
  </animate>
</circle>

如果我想要更精确的控制，可以用分号分隔的一组值替换 from 和 to：

1
2
3
4
5
6
7

<circle ... >
  <animate 
  attributename="cx"
  values="50; 250; 500; 250;"
  dur="1s">
  </animate>
</circle>

最后，我可以定义动画重复多少次（repeatcount），甚至重复应该在什么时间段后停止（repeatdur）：

1
2
3
4
5
6
7
8

<circle ... >
  <animate 
  attributename="cx"
  values="50; 250; 500; 250;"
  dur="1s"
  repeatcount="indefinite"
  repeatdur="180s">
</circle>

大多数 SVG 元素都有可以动画化的属性。

animateTransform

如果 <animate> 控制属性，那么 animateTransform 则动画化变换，包括旋转、缩放、倾斜和平移。它通过改变 transform 属性的值来工作，比如这个平移：

1

<path transform="translate(0,0)"/>

然后，动画的工作方式与 <animate> 相同，添加一个 attributename 并指定变换类型，在这个例子中是旋转：

1
2
3
4

<animatetransform 
  attributename="transform"
  type="rotate">
</animatetransform>

我可以使用 from 和 to 或 values 属性来定义元素如何变换。

使用 additive 属性值为 sum，动画值相对于原始值，从 100 开始动画，通过将 100 加到 100 结束于 200。

类似地，如果我给 accumulate 属性一个 sum 值，每个动画实例都会建立在上一个之上。

开始和停止

到目前为止，每个动画都在页面加载后立即开始。但是有方法不仅可以延迟动画的开始，还可以使用 begin 属性精确定义它开始的位置：

我可以让动画在页面加载两秒后开始：

1
2
3
4
5
6
7
8
9

<animatetransform
  attributename="transform"
  type="translate"
  from="0 0"
  to="750 0"
  dur=".25s"
  begin="2s"
  fill="freeze"
/>

或者，我可以让观众在点击箭头时射击：

1
2
3
4

<animatetransform
  ...
  begin="click"
/>

我可以结合点击事件和延迟，所有这些都不需要 JavaScript，只需要一点 SMIL：

1
2
3
4

<animatetransform
  ...
  begin="click + .5s"
/>

同步动画

动画可以在页面加载时开始，在指定时间后开始，或者点击时开始。通过给它们命名，它们还可以与其他动画同步。

我可以使用 begin 属性以及命名动画是开始还是结束来构建复杂的同步动画集。

沿运动路径动画

到目前为止，这些标题卡片中的所有动画都是上下左右或某种组合。但 SVG 中的 SMIL 还有一个方面可以为动画增加一个额外的维度：使用 animateMotion 元素沿运动路径动画。

animateMotion 接受与 animate 和 animateTransform 相同的所有属性和值，但增加了更多用于精细控制方向和时间。

keyPoints 属性使我能够指定沿运动路径的点，然后调整 Yogi 在它们之间花费的持续时间。

SMIL 并未消亡，宝贝。SMIL 依然活跃

凭借其控制变换、动画化复杂运动路径和同步多个动画的能力，SVG 中的 SMIL 动画仍然是强大的工具。它们可以让设计变得生动，而不需要框架或依赖 JavaScript。它很紧凑，这使它非常适合小的 SVG 效果。

SMIL 包括 begin 属性，这使得链接动画比使用 CSS 直观得多。此外，SMIL 存在于 SVG 文件中，使其非常适合随资源传播的动画。因此，虽然 SMIL 按今天的标准并不现代，可能有点小众，但它仍然可以是神奇的。

不要让 SMIL “已死” 的误解阻止你使用这个神奇的工具。

“谷歌几乎十年前撤销了弃用 SMIL 的决定，因此对于希望使用简单、语义化方式为设计添加动画的设计师和开发者来说，它仍然是一个绝佳的选择。”