svg动画之：animate
<p><b><font color="#ff0000">animate </font></b>动画在 svg 里是基于元素属性变化的动画指令，使用它，必须给出元素的属性名。比如我们画一根线：</p><p><br></p><p><line <font color="#ff0000">x1</font>="50" <font color="#ff0000">y1</font>="50" <font color="#ff0000">x2</font>="250" <font color="#ff0000">y2</font>="50" <font color="#ff0000">stroke</font>="steelblue" /></p><p><br></p><p>画这根线的代码，标红的部分，都是元素 line 的属性名称，其中，x1 和 y1 是线段起始坐标，x2 和 y2 是线段终点坐标，stroke 是描边颜色。“属性”用英文表示，成为 attribute，属性名称就叫 attribute name，svg中写成 <font color="#0000ff">attributeName</font>，注意大小写。</p>
<p><br></p>
<p>animate 当做标签使用，像这样组织代码：</p><p><br></p>
<p><<font color="#ff0000">animate</font> <font color="#0000ff">attributeName</font>="x2" ... /></p><p><br></p><p>这是要改变 x2 的值，因为 animate 指定了 x2 为要发生动画的属性。我们将现场从 250 变回初始值 50，这用上 from="250" to="50" 的语义化描述，就是“从 …… 到 ……”的意思，小学英语里就有的词汇：</p>
<p><br></p>
<p><<font color="#ff0000">animate</font> <font color="#0000ff">attributeName</font>="x2" <font color="#0000ff">from</font>="250" <font color="#0000ff">to</font>="50" ... /></p>
<p><br></p>
<p>动画有运行周期时长，也就是，一个动画全程所需要的时间，这叫 duration，svg 用简称 dur 表示，语句是，dur="2s"，需要实践单位，可以是秒 s，也可以是毫秒 ms，看你喜欢。我们把 dur 加入到 animate 代码中：</p>
<p><br></p><p><<font color="#ff0000">animate</font> <font color="#0000ff">attributeName</font>="x2" <font color="#0000ff">from</font>="250" <font color="#0000ff">to</font>="50" du="2s" ... /></p>
<p><br></p>
<p>还有动画的重复次数。repeat 是 重复，count 是数数，svg 用 repeatCount 表示，注意大小写。语句，repeatCount="100"，需要无限循环的话，用 indefinite 代替 100。同样，将其加入的前面的代码：</p>
<p><br></p>
<p><<font color="#ff0000">animate</font> <font color="#0000ff">attributeName</font>="x2" <font color="#0000ff">from</font>="250" <font color="#0000ff">to</font>="50" du="2s" <font color="#0000ff">repeatCount</font>="indefinite" ... /></p><p><br></p>
<p>动画设计完毕，如何让它驱动 line 线条去改变自身长短呢？把 动画标签 作为子元素放置到 line 代码中即可，line标签的自闭合标签改为有收尾符的标签：</p><p><br></p><p><font color="#ff0000"><line</font> <font color="#ff0000">x1</font>="50" <font color="#0000ff">y1</font>="50" <font color="#0000ff">x2</font>="250" <font color="#0000ff">y2</font>="50" <font color="#0000ff">stroke</font>="steelblue" ></p><p> <<font color="#ff0000">animate</font> <font color="#0000ff">attributeName</font>="x2" <font color="#0000ff">from</font>="250" <font color="#0000ff">to</font>="50" du="2s" <font color="#0000ff">repeatCount</font>="indefinite" /></p><p><font color="#ff0000"></line><br><br></font></p>
<svg style="border: 1px solid steelblue">
<line x1="50" y1="50" x2="250" y2="50" stroke="steelblue">
<animate attributeName="x2" from="250" to="50" dur="2s" repeatCount="indefinite"></animate>
</line>
</svg>
<p><br>效果如我们预设的一样，线条在不断重复着从长变短的动画。</p> 本帖最后由 马黑黑 于 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>
效果放在楼下。
本帖最后由 马黑黑 于 2022-9-11 10:05 编辑 <br /><br /><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> 还需要占楼么？如果需要，我把我这个删了。
我只是想问问，循环也能设置往复形式么？也就是线段变短再变长。 红影 发表于 2022-9-11 09:46
还需要占楼么？如果需要，我把我这个删了。
我只是想问问，循环也能设置往复形式么？也就是线段变短再变长 ...
要占的都占了{:4_170:} 这个和电波那个帖子相比，没有begin=的设置，也是不需要{:4_173:} 红影 发表于 2022-9-11 09:48
这个和电波那个帖子相比，没有begin=的设置，也是不需要
不设置时 begin 是 0s attribute name指定了要发生变化的属性的名字，而透明度那个，好像没特定是哪个属性，那就是对应某个绘画结果的全部了？ 学习了解老师代码，感谢老师分享！{:4_204:} 红影 发表于 2022-9-11 09:51
attribute name指定了要发生变化的属性的名字，而透明度那个，好像没特定是哪个属性，那就是对应某个绘画结 ...
svg图形对象都有 stroke-opacity 属性，属性有没有使用都是合法的、可驱动的 梦缘 发表于 2022-9-11 09:52
学习了解老师代码，感谢老师分享！
{:4_190:} 马黑黑 发表于 2022-9-11 09:47
要占的都占了
看起来不需要我自己删自己的了，嗯，动作迅速{:4_173:} 马黑黑 发表于 2022-9-11 09:48
不设置时 begin 是 0s
哦，知道了。谢谢黑黑{:4_204:} 马黑黑 发表于 2022-9-11 10:06
svg图形对象都有 stroke-opacity 属性，属性有没有使用都是合法的、可驱动的
我是说，这个命令不是驱动一城一池，而是驱动全部吧。 红影 发表于 2022-9-11 10:32
我是说，这个命令不是驱动一城一池，而是驱动全部吧。
我不知道啥一城一池，它驱动 stroke-opacity 就驱动 stroke-opacity，是描边颜色的透明度。 红影 发表于 2022-9-11 10:31
哦，知道了。谢谢黑黑
{:4_181:} 红影 发表于 2022-9-11 10:31
看起来不需要我自己删自己的了，嗯，动作迅速
预留两个行了，其实一个也可以。不需要讲完全部的内容，否则太复杂了大家看了不得要领 马黑黑 发表于 2022-9-11 10:36
我不知道啥一城一池，它驱动 stroke-opacity 就驱动 stroke-opacity，是描边颜色的透明度。
知道了，也就是对范围内所有描边的颜色都运作。 马黑黑 发表于 2022-9-11 08:50
在一楼，线条仅以一个方向变化，整个运动显得突兀，能不能也像 CSS 关键帧动画那样有一个 alternate 属性令 ...
svg 没有相应的 alternate 属性，但可以用数组形式描述变化状态，取代 from ... to 的工作。
前面就想问的，黑黑在留的楼层里说了{:4_187:} 马黑黑 发表于 2022-9-11 10:37
预留两个行了，其实一个也可以。不需要讲完全部的内容，否则太复杂了大家看了不得要领
嗯，还是少点的好，容易懂。太多了会连所有的都带得弄不懂了{:4_173:}
页:
[1]
2