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

2022-10-14 367

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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>

网络异常，图片无法展示

实现一个复杂混合动画

<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>