--- theme: scrolls-light highlight: androidstudio --- 本文使用 `svg` 的 `animate` 实现2个简单常用的动画，svg原理、怎么画图什么的，切图仔讲不明白啦。 if (!you['svg']) return🤣 ## `animate` 基础使用 ```html ``` 简单做了一个小球移动，其中： - `attributeName`属性指定了要做动画的属性，这里是圆形的`cx`属性，即圆心的横坐标。 - `from`属性指定了属性动画的起始值，这里是`50`。 - `to`属性指定了属性动画的结束值，这里是`150`。 - `dur`属性指定了动画的持续时间，这里是`1s`，即1秒。 - `repeatCount`属性指定了动画的重复次数，这里是`indefinite`，表示无限重复。

上面的 `from` 和 `to` 还可以改为 `values` ```html ``` `values` 的值为 `50;150;50`，这样小球的 `cx` 会在1秒内从 `50` 到`150`，然后回到 `50`，就有了一个往返效果

chrome-capture-2023-6-28 (1).gif

## loading动画创建一个 `svg`，然后画3个柱子 ```html ``` 接下来给这些柱子添加修改高度的动画，通过 `begin` 设置触发的时间点 ```html ```

chrome-capture-2023-6-28 (2).gif

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

chrome-capture-2023-6-28 (3).gif

总体看上去还行，过得去~ ## 波纹动画就直接给代码吧 ```html ```

chrome-capture-2023-6-28 (4).gif

## 总结这些都可以通过 `css` 实现，只是个人感觉直接 `svg` 一把梭简单一些😀。除了上述的 `animate`，还可以通过 `dasharray` 和 `dashoffset` 进行动态描边。总的来说 `svg` 还是有很多需要学习的地方。更多属性见：[ - SVG：可缩放矢量图形 | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/animate)