svg动画之：animate

马黑黑 · 发表于 2022-9-11 08:50

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

animate 动画在 svg 里是基于元素属性变化的动画指令，使用它，必须给出元素的属性名。比如我们画一根线：

画这根线的代码，标红的部分，都是元素 line 的属性名称，其中，x1 和 y1 是线段起始坐标，x2 和 y2 是线段终点坐标，stroke 是描边颜色。“属性”用英文表示，成为 attribute，属性名称就叫 attribute name，svg中写成 attributeName，注意大小写。

animate 当做标签使用，像这样组织代码：

这是要改变 x2 的值，因为 animate 指定了 x2 为要发生动画的属性。我们将现场从 250 变回初始值 50，这用上 from="250" to="50" 的语义化描述，就是“从 …… 到 ……”的意思，小学英语里就有的词汇：

动画有运行周期时长，也就是，一个动画全程所需要的时间，这叫 duration，svg 用简称 dur 表示，语句是，dur="2s"，需要实践单位，可以是秒 s，也可以是毫秒 ms，看你喜欢。我们把 dur 加入到 animate 代码中：

还有动画的重复次数。repeat 是重复，count 是数数，svg 用 repeatCount 表示，注意大小写。语句，repeatCount="100"，需要无限循环的话，用 indefinite 代替 100。同样，将其加入的前面的代码：

动画设计完毕，如何让它驱动 line 线条去改变自身长短呢？把动画标签作为子元素放置到 line 代码中即可，line标签的自闭合标签改为有收尾符的标签：

</line>

效果如我们预设的一样，线条在不断重复着从长变短的动画。

马黑黑 · 发表于 2022-9-11 08:50

本帖最后由马黑黑于 2022-9-11 10:11 编辑

在一楼，线条仅以一个方向变化，整个运动显得突兀，能不能也像 CSS 关键帧动画那样有一个 alternate 属性令之执行指令后反向再执行，从而达到匀速变化的效果？

svg 没有相应的 alternate 属性，但我们有办法处理。animate 的参数里，有一个 values 值，注意是复数。这个参数用数组形式描述变化状态，取代 from ... to 的工作（使用 values 参数后 from 和 to 的设置也会自动失效）。

例如，我们前例使用的变化描述，from="250" to="50"，使用 values 表示的话，是酱紫，values="250; 50;"，从 250 到 50 的意思，我们再给它加一个变化描述数字，就可以达成 alternate 一样在运动周期中加入反向运动的效果了：values="250; 50; 250"。这其实就是长→短→长的变化路径，由于头尾变化一致，所以往复运动。

看看整体代码：

<svg style="border: 1px solid steelblue">
      <line x1="50" y1="50" x2="250" y2="50" stroke="steelblue" >
            <animate attributeName="x2" values="250; 50; 250;" dur="2s" repeatCount="indefinite" />
      </line>
</svg>

效果放在楼下。