SVG 中的动画机制： 介绍

注意：本文并非过于技术性的文章，而更多是对 SVG 的强大功能及其动画功能的详细介绍。

要开始使用 SVG，您首先需要从 Adobe 下载 这个。

引言

最容易将 SVG 视为基于文本 (XML) 的 Flash，但它远不止于此。SVG 自 2001 年 9 月 4 日起已成为 W3C 规范，并且最近已开始获得业界的广泛支持（即：Corel、Adobe、Microsoft 以及许多 OSD 应用程序）。

目前，您需要一个浏览器插件才能查看 SVG 文件。 MS IE 何时会原生支持这个标准，没人能猜到...

有几种打包 SVG 文件的方法，主要方法是作为独立文件，或者使用 <EMBED> 标签嵌入到 HTML 文件中。 使用 SVG，您可以绘制圆形、矩形和线条等基本形状，以及创建基于时间或由事件触发的复杂动画。

SVG 原语

那么，我们将在本文中使用哪些元素，它们看起来像什么？

圆

<circle cx="100" cy="100" r="25" fill="black" stroke="black" />

矩形

<rectangle x="100" y="100" width="50" height="50" fill="black" stroke="black" stroke-width="1"/>

SVG 本身没有正方形元素，但 <rectangle> 足够了。

文本

<text x="100" y="100" font-size="20pt">The Code Project</text>

Line

<line x1="100" y1="100" x2="200" y2="100" />

“1”和“2”类型属性是起点和终点。

绘制动画

为了展示 SVG 的功能，我们不会做一些无聊的动画，而是为 Code Project 构建一个相当详细的交互式演示。

考虑到这一点，让我们回顾一下动画在 SVG 中的工作方式。

动画的工作原理

这是一个快速演示来开始本节。

给定矩形示例，此 SVG 最初将渲染一个小的矩形，该矩形将越来越大。

<rect x="100" y="100" width="50" height="50" fill="black" stroke="black" 
   stroke-width="1">
  <animate attributeName="width" attributeType="XML" begin="0s" dur="4s" 
     fill="freeze" from="50" to="250" />
  <animate attributeName="height" attributeType="XML" begin="0s" dur="4s" 
     fill="freeze" from="50" to="250" />
</rect>

如果您浏览一下代码，您会发现它实际上非常简单。

需要注意的主要事项是，动画是声明性的。 这可能需要相当长的时间才能适应，但是通过在形状元素内嵌套一个 <animate/> 元素，您无需编写任何代码即可开始创建越来越复杂的动画。

这里的最后一点是，动画是累积的。 稍后，我们将看到一些例子。

正如我之前所说，动画可以基于两件事启动：时间和事件。 以下是一些您最常遇到的主要事件

• click（点击）
• mouseover（鼠标悬停）
• mouseout（鼠标移开）
• mousemove（鼠标移动）
• begin（动画元素的一个重要事件）
• load（元素的实际渲染）

虽然前四个对于大多数程序员来说应该是显而易见的，但后两个可能需要简要说明...

“begin”表示动画已开始。 当您需要将各种动画串联在一起时，这非常有用，因为只有一个动画需要触发“begin”事件，其余的可以监听该事件。 类似于连锁反应。
这就是我的意思

<rect x="100" y="100" width="50" height="50" fill="black" stroke="black" 
             stroke-width="1" id="rect1">
    <animate attributeName="width" attributeType="XML" begin="4s" dur="4s" 
       fill="freeze" from="50" to="250" restart="whenNotActive" 
       id="firstAnimation" />
    <animate attributeName="height" attributeType="XML" 
       begin="firstAnimation.begin" dur="4s"
       fill="freeze" from="50" to="250" restart="whenNotActive" />
</rect>

“load”表示元素已渲染到画布上。 实际上似乎发生的事情是，当元素已加载到内存驻留缓冲区中时，该事件会触发，而不一定是实际的 paint 发生时。 如果您通过为此事件显示一个警报框来测试它，您将看到该元素尚未出现。 也许需要注意的事情？

可以引发这些 begin 和 load 事件的两个主要实体分别是：各种形状和动画元素。 动画元素通常是形状的子元素。

我们可以修改之前的动画示例，使其基于鼠标悬停事件启动，如下所示

<rect x="100" y="100" width="50" height="50" fill="black" stroke="black" 
  stroke-width="1" id="rect1">
    <animate attributeName="width" attributeType="XML" 
        begin="rect1.mouseover" dur="4s" 
        fill="freeze" from="50" to="250" restart="whenNotActive" />
    <animate attributeName="height" attributeType="XML" 
        begin="rect1.mouseover" dur="4s" 
        fill="freeze" from="50" to="250" restart="whenNotActive" />
</rect>

我包括了一个新的矩形形状属性，称为“restart”。 它所做的只是阻止动画重新启动，如果它仍然忙于初始动画。 尝试删除它，您会看到动画进入循环，因为鼠标悬停会不断触发。

SVG 动画事件的一个非常有用的功能是，您可以基于多个事件触发来启动动画。 例如，我们可以将动画元素的 begin 属性更改为

begin="rect1.mouseout;rect1.click".

现在，此矩形的“begin”属性正在监听两个事件。 我已将 mouseover 更改为 mouseout，以便更好地区分这两个示例。

您将在 SVG 规范中看到许多这些更高级的软件工程功能。

为了结束这篇介绍性文章，这里有一个 SVG 文件，演示了 SVG 的一些动画功能。