使用 SVG 做动画
今天发现一个好玩的动画，想当然以为是 GIF 或者 CSS3 的成果，结果这想当然不靠谱，居然是 SVG 写的，于是就网上一堆操作寻找资料，自己再来个 demo
demo 代码及示例
其实 demo 是为了 2.0 准备的
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVG 动画 demo</title>
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
width="200px"
height="200px"
viewBox="0 0 100 100"
fill="#4fc08d"
>
<g transform="rotate(180 50 50)">
<rect x="10.4" y="10" width="12" height="30">
<animate
attributeName="height"
calcMode="linear"
values="50;80;20;50"
dur="0.5"
begin="-0.2s"
repeatCount="indefinite"
/>
</rect>
<rect x="33.8" y="10" width="12" height="66">
<animate
attributeName="height"
calcMode="linear"
values="50;80;20;50"
dur="0.5"
begin="-0.1s"
repeatCount="indefinite"
/>
</rect>
<rect x="57.2" y="10" width="12" height="40">
<animate
attributeName="height"
calcMode="linear"
values="50;80;20;50"
dur="0.5"
begin="-0.3s"
repeatCount="indefinite"
/>
</rect>
<rect x="80.6" y="10" width="12" height="66">
<animate
attributeName="height"
calcMode="linear"
values="50;80;20;50"
dur="0.5"
begin="0s"
repeatCount="indefinite"
/>
</rect>
</g>
</svg>
</body>
</html>animate 相关语法介绍
只介绍用到的，其他的可以看下文的相关链接
attributeName: 要变化的元素属性名称
calcMode: 控制动画的速度
values: 给动画设置多个关键值点
dur: 动画的持续时间
begin: 动画的延迟时间
repeatCount: 动画执行的次数