28. animateTransform标签实现动画

<animateTransform>标签的使用方法和属性。这个标签用于在SVG元素上应用变换动画，如旋转、缩放、移动等。

<animateTransform> 标签的使用方法

<animateTransform>标签需要嵌套在需要动画的SVG元素内部，并设置attributeName为transform。它的属性定义了动画的类型和行为。

<animateTransform> 标签的属性

• type: 定义变换的类型（如translate、scale、rotate、skewX、skewY）。
• from: 动画的起始值。
• to: 动画的结束值。
• dur: 动画持续时间。
• repeatCount: 动画重复次数。
• fill: 动画完成后的状态。

示例1: 旋转动画 (rotate)

<svg width="100" height="100">
  <!-- 使用 animateTransform 标签应用旋转动画 -->
  <rect x="25" y="25" width="50" height="50" fill="red">
    <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

这个例子中，矩形会无限次数地围绕中心点(50,50)旋转。

示例2: 缩放动画 (scale)

<svg width="100" height="100">
  <!-- 使用 animateTransform 标签应用缩放动画 -->
  <circle cx="50" cy="50" r="30" fill="green">
    <animateTransform attributeName="transform" type="scale" from="1" to="2" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>

这个例子中，圆形会无限次数地在原始大小和两倍大小之间缩放。

示例3: 平移动画 (translate)

<svg width="200" height="100">
  <!-- 使用 animateTransform 标签应用平移动画 -->
  <circle cx="20" cy="50" r="20" fill="blue">
    <animateTransform attributeName="transform" type="translate" from="0 0" to="100 0" dur="4s" repeatCount="indefinite" />
  </circle>
</svg>

这个例子中，圆形会无限次数地沿x轴从位置(20,50)移动到(120,50)。

示例4: 斜切动画 (skewX 和 skewY)

<svg width="200" height="100">
  <!-- 使用 animateTransform 标签应用X轴斜切动画 -->
  <rect x="50" y="20" width="100" height="60" fill="purple">
    <animateTransform attributeName="transform" type="skewX" from="0" to="45" dur="5s" repeatCount="indefinite" />
  </rect>
  <!-- 使用 animateTransform 标签应用Y轴斜切动画 -->
  <rect x="50" y="20" width="100" height="60" fill="orange" opacity="0.5">
    <animateTransform attributeName="transform" type="skewY" from="0" to="45" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

这个例子中，两个矩形会无限次数地分别沿X轴和Y轴斜切。