本文使用 svg 的 animate 实现2个简单常用的动画，svg原理、怎么画图什么的，切图仔讲不明白啦。
if (!you['svg']) return🤣
animate 基础使用
html
<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
html
<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个柱子
html
<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 设置触发的时间点
html
<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 让它看起来更有动感
html
<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>
总体看上去还行，过得去~
波纹动画
就直接给代码吧
html
<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 还是有很多需要学习的地方。