XML驱动的SVG动画状态机设计

使用XML定义SVG动画状态转换，实现可复用的矢量动画引擎。 · 难度：入门 · +10XP

XML驱动的SVG动画状态机设计

SVG内置SMIL动画，但复杂交互需状态管理。本教程用XML描述状态机：定义元素包含动画目标、持续时间、触发事件。通过连接状态，实现点击切换、循环播放。示例：制作一个加载旋转图标，点击暂停/恢复。利用SVG的和元素实现属性变化，全部由XML配置驱动。

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="20" fill="blue">
    <animateTransform attributeName="transform" type="rotate"
      from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite" />
  </circle>
  <stateMachine>
    <state id="running">
      <animate target="circle" attribute="opacity" to="1" dur="0.3s"/>
    </state>
  </stateMachine>
</svg>