HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用

HTML5中的SVG(Scaleable Vector Graphics)是一种用于描述二维矢量图形的XML格式，可以通过代码实现画布及图形的布局与样式。除了支持静态图像，SVG也支持通过JavaScript实现动态效果与用户交互，例如使用事件来控制元素属性或使用JavaScript创建、移动、旋转和缩放图形等。本篇攻略将介绍SVG中的用户交互性（动画）及其应用，并包含两个示例说明。

实现SVG动画的方法

1. 使用CSS transition或animation

可以使用CSS的transition或animation属性来实现SVG图形的动画效果，与HTML元素相同，只需对要实现动画效果的元素添加相应的CSS样式即可。例如以下的代码使一个矩形元素实现了从原始状态到悬停状态时颜色发生变化的动画效果：

rect {
    fill: lightblue;
    transition: fill 0.3s ease;
}
rect:hover {
    fill: lightgray;
}

1. 使用JavaScript实现动画

除了使用CSS，开发者也可以使用JavaScript代码实现特定的动画效果。例如，可以使用setInterval()来创建一个定时器，然后在定时器回调函数中更新SVG元素的属性来实现动画效果：

var dx = 3;
var dy = 3;

var circle = document.getElementById("myCircle");

setInterval(function() {
    var cx = parseFloat(circle.getAttribute("cx"));
    var cy = parseFloat(circle.getAttribute("cy"));

    if (cx <= 20 || cx >= 180) {
        dx = -dx;
    }
    if (cy <= 20 || cy >= 180) {
        dy = -dy;
    }

    circle.setAttribute("cx", cx + dx);
    circle.setAttribute("cy", cy + dy);
}, 30);

SVG动画应用示例

示例一：使用transition实现SVG形状的颜色变化

以下代码示例展示了如何使用transition属性实现当鼠标悬停在SVG矩形元素上时，颜色的动态变化。你可以在文本框中输入代码并点击“运行”来查看效果：

<svg width="200" height="200">
  <rect x="20" y="20" width="160" height="160" fill="lightblue">
    <animate attributeName="opacity" attributeType="XML"
      values="1;0;1" begin="0s" dur="1s" repeatCount="indefinite"/>
    <animate attributeName="x" attributeType="XML"
      values="20;180;20" dur="1s" repeatCount="indefinite" />
    <animate attributeName="y" attributeType="XML"
      values="20;180;20" dur="1s" repeatCount="indefinite" />
  </rect>
</svg>

<script>
  var rect = document.querySelector("rect");
  rect.addEventListener("mouseover", function() {
    this.classList.add("hovered");
  });
  rect.addEventListener("mouseout", function() {
    this.classList.remove("hovered");
  });
</script>

<style>
  rect {
    opacity: 1;
    transition: opacity 0.5s;
  }
  rect.hovered {
    fill: lightgray;
    opacity: 0.7;
  }
</style>

在上述代码中，SVG矩形元素添加了transition属性通过CSS实现了颜色变化和透明度变化。JavaScript则监听了鼠标悬停和离开事件，当鼠标悬停在矩形上时，将矩形的class属性更新为"hovered"，CSS样式则会将矩形背景颜色更改为lightgray，并降低了透明度。

示例二：使用animation实现SVG路径轨迹动画

以下代码示例展示了如何使用SVG基本形状元素和动画属性来实现路径轨迹动画。你可以在文本框中输入代码并点击“运行”来查看效果：

<svg width="300" height="300">
  <path d="M20,200 Q170,-70 320,200 Q50,50 170,215 Q290,50 20,200" fill="transparent" stroke="gray" stroke-width="2" />
  <circle r="10" fill="red">
    <animateMotion path="M20,200 Q170,-70 320,200 Q50,50 170,215 Q290,50 20,200" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>

在上述代码中，SVG的元素用于定义圆形图形的路径。stroke和stroke-width属性用于绘制路径轮廓，fill为透明色(transparent)。相应的元素也绘制了一个红色小圆点，使用了SVG动画属性animateMotion，它的path属性指定了用来移动圆形的路径，dur表示动画持续时间，repeatCount表示无限重复。通过路径定义，当动画播放时，小圆点在路径沿着曲线移动，实现了路径轨迹动画。

以上两个代码示例，通过CSS与JavaScript实现了SVG图形在颜色、形态和形状间的转换及路径动画，说明了SVG动画的实际应用。在实际开发中，开发者可以通过学习SVG图形、CSS与JavaScript等知识，发挥创意，灵活应用SVG动画，提升页面的交互性及用户体验。