27. animate标签实现动画

SVG <animate> 基础动画

SVG的<animate>标签用于创建基本的SVG动画。它可以改变任何开始和结束状态之间的属性或样式。

<animate> 标签的基础属性

• attributeName: 指定要动画化的属性。
• from: 动画的起始值。
• to: 动画的结束值。
• dur: 动画持续时间。
• repeatCount: 动画重复次数。
• fill: 动画完成后的状态。

示例1: 改变颜色

<svg width="100" height="100">
  <!-- 使用 animate 标签改变矩形的填充色 -->
  <rect x="10" y="10" width="80" height="80" fill="blue">
    <animate attributeName="fill" from="blue" to="red" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

这个例子展示了如何无限次数地从蓝色过渡到红色。

示例2: 改变位置

<svg width="100" height="100">
  <!-- 使用 animate 标签移动圆形的位置 -->
  <circle cx="50" cy="50" r="40" fill="green">
    <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="3" />
  </circle>
</svg>

这个例子展示了如何将圆形在2秒内从x坐标50移动到150，重复3次。

示例3: 改变透明度

<svg width="100" height="100">
  <!-- 使用 animate 标签改变矩形的透明度 -->
  <rect x="10" y="10" width="80" height="80" fill="orange" opacity="1">
    <animate attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" />
  </rect>
</svg>

这个例子展示了如何无限次数地改变矩形的透明度。

示例4: 改变大小

<svg width="200" height="200">
  <!-- 使用 animate 标签改变矩形的大小 -->
  <rect x="10" y="10" width="50" height="50" fill="purple">
    <animate attributeName="width" from="50" to="150" dur="4s" repeatCount="indefinite" />
    <animate attributeName="height" from="50" to="150" dur="4s" repeatCount="indefinite" />
  </rect>
</svg>

这个例子展示了如何无限次数地改变矩形的宽度和高度。

SVG <animate> 高级动画

<animate> 标签的高级属性

• begin: 定义动画何时开始。
• end: 定义动画何时结束。
• values: 定义动画过程中的一系列值。
• keyTimes: 与values属性配合使用，定义每个值的时间点。
• calcMode: 定义动画值之间的插值模式。

示例1: 使用begin和end

<svg width="100" height="100">
  <!-- 使用 begin 和 end 属性控制动画的开始和结束时间 -->
  <circle cx="50" cy="50" r="10" fill="black">
    <animate attributeName="cx" from="50" to="150" dur="5s" begin="0.5s" end="4.5s" />
  </circle>
</svg>

这个例子中，圆形的动画在0.5秒后开始，在4.5秒时结束。

示例2: 使用values

<svg width="200" height="200">
  <!-- 使用 values 属性定义一系列动画值 -->
  <rect x="10" y="10" width="50" height="50" fill="blue">
    <animate attributeName="fill" values="blue;green;red;yellow;blue" dur="10s" repeatCount="indefinite" />
  </rect>
</svg>

这个例子中，矩形的填充色会在10秒内循环通过蓝色、绿色、红色、黄色再回到蓝色。

示例3: 使用keyTimes

<svg width="200" height="200">
  <!-- 使用 keyTimes 属性指定每个值的时间点 -->
  <circle cx="50" cy="50" r="20" fill="orange">
    <animate attributeName="r" values="20;5;20;5;20" keyTimes="0;0.25;0.5;0.75;1" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

这个例子中，圆形的半径会在5秒内循环从20变到5再回到20，keyTimes定义了变化的具体时间点。

示例4: 使用calcMode

<svg width="300" height="100">
  <!-- 使用 calcMode 属性定义动画的插值模式 -->
  <rect x="10" y="10" width="50" height="50" fill="lime">
    <animate attributeName="x" values="10;290;10" calcMode="linear" dur="6s" repeatCount="indefinite" />
  </rect>
</svg>

这个例子中，矩形沿x轴的位置会在6秒内循环从10移动到290再回到10，calcMode设置为linear表示值之间的变化是线性的。

示例5: 综合使用

<svg width="300" height="300">
  <!-- 综合使用 begin, end, values, keyTimes, calcMode 属性 -->
  <polygon points="150,10 200,280 100,280" fill="teal">
    <animate attributeName="points" begin="1s" end="9s" values="150,10 200,280 100,280; 150,110 250,380 50,380; 150,10 200,280 100,280" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" dur="10s" repeatCount="indefinite" />
  </polygon>
</svg>

这个例子中，多边形的形状会在10秒内循环变化，begin和end控制动画的开始和结束时间，values定义了形状的变化序列，keyTimes和calcMode设置为spline，配合keySplines定义了值之间的贝塞尔曲线插值。