你可以学会的svg动画(SMIL)

Spirited_Away
1,201 阅读2分钟

SMIL介绍

SMIL 全称 Synchronized Multimedia Integration Language，它允许我们通过 HTML 标签实现动画效果，它可以用于：

  • 实现过渡动画
  • 实现补间动画
  • 动画颜色变换
  • 路径运动动画（CSS3无法实现） SMIL 包含以下标签：
<set>
<animate>
<animateColor>// 这个元素，现在已经废弃。
<animateTransform>
<animateMotion>

为什么要用 SMIL？

实现动画的全新方式：

  • 无需 CSS
  • 无需 JS
  • 几个标签轻松实现复杂动画，它不香吗？

SMIL元素一些共同属性的介绍

  • attributeName：表示需要实现动画的属性。
  • attributeType: 根据attributeName指定的值来判断是svg元素属性的变化，还是css属性的变化。
    • CSS, 表示css属性值的变化。
    • XML，表示svg属性值的变化。
  • begin: 表示动画延迟多少秒。
  • from: 表示动画开始的值。
  • to：表示动画结束的值。
  • fill: 表示动画结束时所处的状态。
    • freeze: 表示结束后，让状态处于结束时的动画状态。
    • remove: 表示结束后，让状态处于开始时的动画状态。
  • values: 表示实现多个状态动画。不能使用from, to属性。每个状态值通过;分隔。
  • dur: 表示动画持续多少秒。
  • type: 在animateTransform元素中变换的类型。
  • repeatCount: 表示重复多少次动画。
  • path: 表示animateMotion元素动画时运行的轨迹。
  • rotate: 表示animateMotion元素动画时到达有棱角的位置时，怎样运行。一般设置为0。
  • id: 指定每个动画元素的唯一标识，可以结合begin来实现复杂动画。

set 标签

实现属性的延迟设置

<svg width="400" height="400">
  <rect x="0" y="0" width="100" height="100">
    <set attributeName="x" attributeType="XML" to="10" begin="1s" />
    <set attributeName="x" attributeType="XML" to="20" begin="2s" />
    <set attributeName="x" attributeType="XML" to="30" begin="3s" />
    <set attributeName="x" attributeType="XML" to="40" begin="4s" />
    <set attributeName="x" attributeType="XML" to="50" begin="5s" />
  </rect>
</svg>

animate 标签

动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。

  <svg width="200" height="200" viewPort="0 0 200 200">
    <rect x="10" y="10" width="100" height="100">
      <animate attributeType="CSS" attributeName="width" from="100" to="150" dur="3s" fill="freeze" />
    </rect>
  </svg>
  <svg width="200" height="200" viewPort="0 0 200 200">
    <rect x="10" y="10" width="100" height="100">
      <animate attributeType="XML" attributeName="width" from="100" to="150" dur="3s" fill="freeze" />
    </rect>
  </svg>

以上两种实现相同效果。一个是通过CSS，一个是通过svg。

形状补间动画。不规则图形的变化。

<svg width="400" height="400">
  <polygon points="30 30 70 30 90 70 10 70" fill="#fcc" stroke="black">
    <animate attributeName="points" attributeType="XML" to="50 30 70 50 50 90 30 50" dur="5s" fill="freeze" repeatCount="1" />
  </polygon>
</svg>

animateTransform 标签

animateTransform元素变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。 注意：如果遇到transform属性值的变化，需要用到该元素。而不要去用animate元素做变换。

  <svg width="200" height="200" viewBox="0 0 200 200">
    <rect x="0" y="0" width="60" height="60" fill="red">
      <animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="2"
        repeatCount="indefinite" />
    </rect>
  </svg>

animateMotion 标签

这是一个非常nb的标签。可以让元素通过指定的轨迹运动。

实现一个轨迹动画

  <svg width="300px" height="100px">
    <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" fill="none" />
    <rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1">
      <animateMotion path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" dur="3s"
        repeatCount="indefinite" rotate="auto">
    </rect>
  </svg>

image.png 实现一个复杂混合动画

<svg viewBox="0 0 200 200" width="200" height="200">
    <rect x="0" y="0" rx="0" ry="0" width="10" height="10" fill="red">
      <animateMotion
        id="forward-rect"
        path="M 10 10 L 110 10 L 110 110 L 10 110"
        dur="2s"
        rotate="0"
        fill="freeze"
        begin="0; backward-rect.end + 0.5s"
      />
      <animateMotion
        id="backward-rect"
        path="M 10 110 L 110 110 L 110 10 L 10 10"
        dur="2s"
        rotate="0"
        fill="freeze"
        begin="forward-rect.end + 0.5s"
      />
      <animate
        id="red-to-blue"
        attributeType="XML"
        attributeName="fill"
        begin="0; blue-to-red.end + 1s"
        from="red"
        to="blue"
        dur="2s"
        fill="freeze"
      />
      <animate
        id="blue-to-red"
        attributeType="XML"
        attributeName="fill"
        begin="red-to-blue.end + 1s"
        from="blue"
        to="red"
        dur="2s"
        fill="freeze"
      />
    </rect>
    <path d="M 10 10 L 110 10 L 110 110 L 10 110" fill="none" stroke-width="1" stroke="blue"/>
</svg>

实现一个好看的loading动画

  <svg viewBox="0 0 50 50" width="200" height="200">
    <circle cx="25" cy="25" r="22" fill="none" stroke-width="3" stroke-dasharray="34" stroke="#3be6cb"
      stroke-linecap="round">
      <animateTransform attributeName="transform" type="rotate" values="0 25 25; 360 25 25" dur="1.5s"
        repeatCount="indefinite" />
      <animate attributeName="stroke" values="#3be6cb;#02bcfe;#3be6cb" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="25" cy="25" r="12" fill="none" stroke-width="3" stroke-dasharray="19" stroke="#02bcfe"
      stroke-linecap="round">
      <animateTransform attributeName="transform" type="rotate" values="360 25 25;0 25 25" dur="1.5s"
        repeatCount="indefinite" />
      <animate attributeName="stroke" values="#02bcfe;#3be6cb;#02bcfe" dur="3s" repeatCount="indefinite" />
    </circle>
  </svg>

动画.gif

avatar
文章
阅读
粉丝