本文使用 svg 的 animate 实现2个简单常用的动画，svg原理、怎么画图什么的，切图仔讲不明白啦。

if (!you[‘svg’]) return🤣

animate 基础使用

<svg width="200" height="200">
  <circle cx="50" cy="50" r="20" fill="blue">
    <animate attributeName="cx"
       from="50"
       to="150"
       dur="1s"
       repeatCount="indefinite"
    />
  </circle>
</svg>

简单做了一个小球移动，其中：

• attributeName属性指定了要做动画的属性，这里是圆形的cx属性，即圆心的横坐标。
• from属性指定了属性动画的起始值，这里是50。
• to属性指定了属性动画的结束值，这里是150。
• dur属性指定了动画的持续时间，这里是1s，即1秒。
• repeatCount属性指定了动画的重复次数，这里是indefinite，表示无限重复。

上面的 from 和 to 还可以改为 values

<svg width="200" height="200">
  <circle cx="50" cy="50" r="20" fill="blue">
    <animate 
        attributeName="cx"
        values="50;150;50"
        dur="1s"
        repeatCount="indefinite"
    />
  </circle>
</svg>

values 的值为 50;150;50，这样小球的 cx 会在1秒内从 50 到150，然后回到 50，就有了一个往返效果

loading动画

创建一个 svg，然后画3个柱子

<svg width="200" height="200">
  <rect x="0" y="0" width="8" height="20" fill="#888"></rect>
  <rect x="16" y="0" width="8" height="20" fill="#888"></rect>
  <rect x="32" y="0" width="8" height="20" fill="#888"></rect>
</svg>

接下来给这些柱子添加修改高度的动画，通过 begin 设置触发的时间点

<svg width="200" height="200">
  <rect x="0" y="0" width="8" height="20" fill="#888">
      <animate
          attributeName="height"
          values="20; 40; 20"
          begin="0s"
          dur="0.6s"
          repeatCount="indefinite"
      />
  </rect>
  <rect x="16" y="0" width="8" height="20" fill="#888">
      <animate
          attributeName="height"
          values="20; 40; 20"
          begin="0.15s"
          dur="0.6s"
          repeatCount="indefinite"
      />
  </rect>
  <rect x="32" y="0" width="8" height="20" fill="#888">
      <animate
          attributeName="height"
          values="20; 40; 20"
          begin="0.3s"
          dur="0.6s"
          repeatCount="indefinite"
      />
  </rect>
</svg>

改了这些属性后能动，但挺丑，修改下 y 和 opacity 让它看起来更有动感

<svg width="200" height="200">
    <rect x="0" y="20" width="8" height="20" fill="#888" opacity="0.2">
        <animate
            attributeName="opacity"
            values="0.2; 1; 0.2"
            begin="0s"
            dur="0.6s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="height"
            values="20; 40; 20"
            begin="0s"
            dur="0.6s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="y"
            values="20; 10; 20"
            begin="0s"
            dur="0.6s"
            repeatCount="indefinite"
        />
    </rect>
    <rect x="16" y="20" width="8" height="20" fill="#888" opacity="0.2">
        <animate
            attributeName="opacity"
            values="0.2; 1; 0.2"
            begin="0.15s"
            dur="0.6s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="height"
            values="20; 40; 20"
            begin="0.15s"
            dur="0.6s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="y"
            values="20; 10; 20"
            begin="0.15s"
            dur="0.6s"
            repeatCount="indefinite"
        />
    </rect>
    <rect x="32" y="20" width="8" height="20" fill="#888" opacity="0.2">
        <animate
            attributeName="opacity"
            values="0.2; 1; 0.2"
            begin="0.3s"
            dur="0.6s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="height"
            values="20; 40; 20"
            begin="0.3s"
            dur="0.6s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="y"
            values="20; 10; 20"
            begin="0.3s"
            dur="0.6s"
            repeatCount="indefinite"
        />
    </rect>
</svg>

总体看上去还行，过得去~

波纹动画

就直接给代码吧

<svg width="200" height="200">
    <circle cx="100" cy="100" r="10" fill="blue" opacity="0">
        <animate
            attributeName="opacity"
            values="1;0"
            dur="1s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="r"
            values="10;30"
            dur="1s"
            repeatCount="indefinite"
        />
    </circle>
    <circle cx="100" cy="100" r="10" fill="blue" opacity="0">
        <animate
            attributeName="opacity"
            values="1;0"
            dur="1s"
            repeatCount="indefinite"
            begin="0.2s"
        />
        <animate
            attributeName="r"
            values="10;30"
            dur="1s"
            repeatCount="indefinite"
            begin="0.2s"
        />
    </circle>
    <circle cx="100" cy="100" r="10" fill="blue" opacity="0">
        <animate
            attributeName="opacity"
            values="1;0"
            dur="1s"
            repeatCount="indefinite"
            begin="0.4s"
        />
        <animate
            attributeName="r"
            values="10;30"
            dur="1s"
            repeatCount="indefinite"
            begin="0.4s"
        />
    </circle>
</svg>

总结

这些都可以通过 css 实现，只是个人感觉直接 svg 一把梭简单一些😀。除了上述的 animate，还可以通过 dasharray 和 dashoffset 进行动态描边。总的来说 svg 还是有很多需要学习的地方。

更多属性见： - SVG：可缩放矢量图形 | MDN (mozilla.org)