SVG SMIL 动画（基本动画、变换动画）

最新推荐文章于 2024-05-22 09:18:18 发布

卡尔特斯

最新推荐文章于 2024-05-22 09:18:18 发布

阅读量372

点赞数

分类专栏： SVG 文章标签：动画 css3 html

本文链接：https://blog.csdn.net/zz00008888/article/details/121136128

版权

SVG 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

一、简介

动画标签：<animate>、<animateTransform>、<animateMotion> ...
动画元素、属性定位以及动画参数设置：
- attributeName、attributeType
- from、to、dur、repeatCount、fill …
- calcMode …

二、使用方式

定位动画目标
- Internal Resource Identifier 定位，指定需要生效动画的标签。
```
<animate xlink:href="url(#rect1)"></animate>
```
- 包含在目标元素内，对包含的父元素生效动画。
```
<rect x="0" ...>
    <animate></animate>
</rect>
```

设置要进行动画的属性以及变化范围、时间长度

<animate xlink:href="url(#rect1)"
    attributeType="XML"
    attributeName="x"
    from="0" to="100"
    dur="2s"
    repeatCount="1">
</animate>

三、基本动画

animate 支持叠加动画，也就是同一个标签支持添加多个 animate 动画标签。
效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body {
      margin: 0;
      padding: 0;
      background-color: #001122;
      /* 全屏 */
      width: 100%;
      height: 100%;
      /* 清空字号，免得影响 svg */
      line-height: 0;
      font-size: 0;
    }
  </style>
</head>
<body>
  <!-- animate
    attributeType: 标签类型
    attributeName: 需要支持动画的属性
    begin: 动画开始时机
    from: 开始值
    to: 结束值
    dur: 动画时间
    fill: freeze（停留在最后）、none（默认，回到起点）
    repeatCount: 动画次数，indefinite(无限次)，默认 1
    -->
  <!-- svg -->
  <svg width="100%" height="100%">
    <!-- 1 平移动画 -->
    <rect x="50" y="10" width="40" height="40" fill="red">
      <!-- 动画 -->
      <animate attributeType="XML"
        attributeName="x"
        from="50" to="200"
        dur="1s"
        repeatCount="indefinite"/>
      <!-- 颜色变化 -->
      <animate attributeType="XML"
        attributeName="fill"
        from="red" to="yellow"
        dur="1s"
        repeatCount="indefinite"/>
    </rect>
    <!-- 2 平移动画 - 往返 -->
    <rect x="50" y="80" width="40" height="40" fill="red">
      <!-- 动画 -->
      <animate id="goright1" attributeType="XML"
        attributeName="x"
        begin="0; goleft1.end"
        from="50" to="200"
        dur="1s"
        fill="freeze"/>
      <animate id="goleft1" attributeType="XML"
        attributeName="x"
        begin="goright1.end"
        from="200" to="50"
        dur="1s"
        fill="freeze"/>
      <!-- 颜色变化 -->
      <animate attributeType="XML"
        attributeName="fill"
        from="red" to="yellow"
        dur="1s"
        repeatCount="indefinite"/>
    </rect>
    <!-- 3 平移动画 - 往返 - 暂停 -->
    <rect x="200" y="150" width="40" height="40" fill="red">
      <!-- 动画 -->
      <animate id="goleft2" attributeType="XML"
        attributeName="x"
        begin="0; goright2.end + 1s"
        from="200" to="50"
        dur="1s"
        fill="freeze"/>
      <animate id="goright2" attributeType="XML"
        attributeName="x"
        begin="goleft2.end + 1s"
        from="50" to="200"
        dur="1s"
        fill="freeze"/>
      <!-- 颜色变化 -->
      <animate attributeType="XML"
        attributeName="fill"
        from="red" to="yellow"
        dur="1s"
        repeatCount="indefinite"/>
    </rect>
  </svg>
</body>
</html>

四、变换动画

animateTransform 支持叠加动画，也就是同一个标签不能添加多个 animateTransform 动画标签。
效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body {
      margin: 0;
      padding: 0;
      background-color: #001122;
      /* 全屏 */
      width: 100%;
      height: 100%;
      /* 清空字号，免得影响 svg */
      line-height: 0;
      font-size: 0;
    }
  </style>
</head>
<body>
  <!-- animateTransform
    attributeType: 标签类型
    attributeName: 需要支持动画的属性
    type: 子属性
    begin: 动画开始时机
    from: 开始值
    to: 结束值
    dur: 动画时间
    fill: freeze（停留在最后）、none（默认，回到起点）
    repeatCount: 动画次数，indefinite(无限次)，默认 1
    -->
  <!-- svg -->
  <svg width="100%" height="100%" viewBox="-400 -400 800 800">
    <!-- 1 原地旋转 -->
    <rect x="0" y="0" width="40" height="40" fill="red">
      <!-- 动画 -->
      <animateTransform attributeType="XML"
        attributeName="transform"
        type="rotate"
        from="0"
        to="360"
        dur="3s"
        repeatCount="indefinite">
    </rect>
    <!-- 1 原地旋转 - 缩放 - 不支持多个动画叠加 -->
    <rect x="0" y="80" width="40" height="40" fill="red">
      <!-- 动画 -->
      <!-- <animateTransform attributeType="XML"
        attributeName="transform"
        type="rotate"
        from="0"
        to="360"
        dur="3s"
        repeatCount="indefinite"> -->
      <animateTransform attributeType="XML"
        attributeName="transform"
        type="scale"
        from="1"
        to="2"
        dur="3s"
        repeatCount="indefinite">
    </rect>
  </svg>
</body>
</html>