svg动画之 animate（一）
介绍svg动画之前先简单了解一下 SMIL：SMIL 全称为 Synchronized Multimedia Integration Language，意为同步多媒体集成语言，于上世纪末由 W3C 正式推出。发行以来被广泛应用于基于XML的语言。svg因为基于XML，自然可以使用SMIL动画，通常大家都称为svg动画，但是，我们要明白的是，svg动画叫 SVG animation with SMIL，基于 SMIL 的svg动画。svg动画主要有如下几种：
set set也被视为svg动画的一种，但其实它只是 animate 的一个简化版本
animate 属性动画
animateTransform 转换属性（如transform）动画
animateMotion 路径动画
animatecolor 颜色属性值相关动画，已被废弃，可用 animate 实现
总共也就 3.5 种。本节专门介绍 svg 的 animate 动画，附带讲讲 set 动画。
假如我们在svg画布上绘制了一个圆：
<svg style="width: 400px; height: 120px; border: 1px solid gray;">
<circle cx="40" cy="60" r="30" fill="green" />
</svg>
现在，我们想让这个圆自左向右移动。animate 动画就是专门用来实现此类功能的，它允许我们在指定的周期时间内改变元素的指定属性来达成动画效果。圆要自左向右移动，就需要改变圆心坐标 {cx,cy} 中的cx，因为它决定了圆的水平位置。animate 是一个标签，它要包含在运动元素标签之内才能作用于运动元素，故此，circle标签要写成非自闭合标签的样子。以下代码，在上述代码基础上加入了 animate 标签，animate 标签的属性我们随后会一一解释：
<svg style="width: 400px; height: 120px; border: 1px solid gray;">
<circle cx="40" cy="60" r="30" fill="green">
<animate
id="hMove"
attributeName="cx"
begin="click"
from="40"
to="360"
dur="2"
repeatCount="1"
fill="freeze"
restart="whenNotActive"
/>
</circle>
</svg>
【说明】单击上方的绿色小圆，会触发 animate 动画，后续单击会继续触发。
现在，我们来逐一理解 animate 动画的各个参数：
id : 和HTML一样，svg元素也可以有自己的id标识，animate的id标识用于后续JS控制的句柄，本例，它是多余的
attributeName : 动画要改变的宿主元素（本例为circle）的属性名称
begin : 动画什么时候或以何种状态开始，值可为 2s 之类，表示两秒后开始，本例使用 click，表示点击后开始
from : 动画从哪儿或什么状态开始，宿主元素有初始属性值时可以省略
to : 动画在哪儿或什么状态结束，不能省略
dur : 就是 duration，动画一个运行周期所用的时间，单位缺省时是秒即 s，可以使用其他单位，如 m、ms
repeatCount : 动画重复次数，无限循环值用 indefinite（CSS用infinite）
fill : 动画结束时的状态，值为 freeze（冻结）表示停留在结束时的状态，默认值 remove 或缺省fill属性时回到初始状态
restart : 动画重启方式，always=任何时候都可以重启、whenNotActive=非活动状态可以重启、never=不能重启
animate 每一次使用改变一个宿主元素属性值，如果希望同时改变其他属性值，那么，再加一个或多个 animate 标签。下例，在小圆移动的同时，将圆的填充色从 green 变为 red，期间的颜色变化，基于 green 到 red 的色相转换。单击绿色小圆看看效果：
代码如下：
<svg style="width: 400px; height: 120px; border: 1px solid gray;">
<circle cx="40" cy="60" r="30" fill="green">
<animate attributeName="cx" begin="click" from="40" to="360" dur="2" repeatCount="1" fill="freeze" />
<animate attributeName="fill" begin="click" to="red" dur="2" repeatCount="1" fill="freeze" />
</circle>
</svg>
animate 的参数from 和 to 可以用 values 替代。values 参数可能更为灵活，比方说，我们想让小圆左右来回移动，且颜色在红蓝绿之间来回变换，那么，values 参数可以解决问题。下面是代码和效果，注意 repeatCount 的设置以及 values 值的设定方式：
<svg style="width: 400px; height: 120px; border: 1px solid gray;">
<circle cx="40" cy="60" r="30" fill="green">
<animate attributeName="cx" begin="click" values="40; 360; 40" dur="4" repeatCount="indefinite" />
<animate attributeName="fill" begin="click" values="red; blue; green"; dur="3" repeatCount="indefinite" />
</circle>
</svg>
单击绿色小圆启动动画：
至于 animate 的简化版本，set 动画，它缩减了 animate 的属性，只运行一次动画，可操作空间极少。看下面的代码：
<svg style="width: 400px; height: 120px; border: 1px solid gray;">
<circle cx="40" cy="60" r="30" fill="green">
<set attributeName="fill" begin="3s" to="red" />
</circle>
</svg>
上述代码，set 标签要改变的宿主元素的属性是fill（填充色），3秒钟后小圆变为红色。可以将代码放到 pencil code 运行看看效果。
【小结】animate 动画需要将 animate 标签放在运行动画的元素标签里面，参数繁多（本示例尚未全部使用），但都是语义化的，很容易理解。每一个animate标签只能改变宿主元素的一个属性，可以并列使用以改变多个属性。set 动画可视为是 animate 动画的简化版，它只运行一次。
请特别注意，本节所介绍的svg动画的代码构成和所提到的 animate 动画参数，像 attributeName、begin、from、to、value、dur、repeatCount、fill 等等，其它的动画元素同样会用到，所以本节既介绍 animate 动画，也是其它动画的基础。
发表于 2023-11-19 08:04
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2023-11-19 16:20
