SMIL动画基础与常见误区
在svg中，smil（synchronized multimedia integration language）提供了一种声明式的方式来定义动画。然而，在实际应用中，开发者常会遇到一些关于动画控制的误区。
values 与 keyTimes 属性的配对使用
使用
例如，如果values="value1;value2"，则keyTimes必须是"0;1"。如果values="value1;value2;value3"，则keyTimes可以是"0;0.5;1"。如果省略keyTimes，或者其值与values不匹配，动画可能无法正常播放或控制。
错误示例 (缺少 keyTimes):
正确示例 (添加 keyTimes):
SVGSVGElement 级别的动画控制
SVG DOM提供了SVGSVGElement接口，其中包含pauseAnimations()和unpauseAnimations()方法。这些方法的作用是暂停或恢复整个SVG元素内部的所有SMIL动画。这意味着，如果你在一个包含多个动画的SVG根元素上调用这些方法，所有动画都会被同时暂停或恢复。
例如，以下代码将暂停或恢复ID为svg的SVG元素内的所有动画：
document.getElementById("svg").pauseAnimations(); // 暂停所有动画
document.getElementById("svg").unpauseAnimations(); // 恢复所有动画这种全局控制方式无法满足只控制特定动画的需求，例如在一个SVG中，一部分动画需要持续运行，而另一部分则需要用户交互来控制。
精确控制单个SMIL动画
要实现对SVG中单个SMIL动画的精确控制，我们需要利用ElementTimeControl接口提供的方法，这些方法可以直接在
ElementTimeControl 接口及其方法
ElementTimeControl接口提供了以下关键方法来控制单个动画的播放：
- beginElement(): 启动动画。如果动画已经处于活动状态，调用此方法会使其重新开始。
- endElement(): 结束动画。调用此方法会立即停止动画，并使其回到初始状态（除非设置了fill="freeze"）。
需要注意的是，beginElement()和endElement()提供了动画的开始和结束控制，但它们不提供像视频播放器那样的“暂停”在中间状态的功能。要实现类似暂停的效果，通常需要结合其他技术，或者重新设计动画逻辑。
示例：通过按钮控制特定动画
假设我们有一个SVG，其中包含两组动画：poi_back 组的动画需要持续运行，而 poi_front 组的动画则需要通过按钮来控制其开始和停止。
首先，确保你的
HTML结构:
JavaScript控制逻辑:
// 获取需要控制的动画元素
const poiFrontAnimation = document.getElementById("poi_front_animation");
// 为按钮添加事件监听器
document.getElementById("startButton").onclick = function() {
poiFrontAnimation.beginElement(); // 启动 poi_front 动画
};
document.getElementById("stopButton").onclick = function() {
poiFrontAnimation.endElement(); // 停止 poi_front 动画
};CSS样式 (保持不变，用于页面布局):
html, body {
height: 100%;
margin: 0%;
padding: 0%;
overflow: hidden;
}
body {
height: 100vh;
display: flex;
background-color: #2a0000;
box-sizing: border-box;
flex-direction: column;
align-items: center;
}
#startButton {
width: 60px;
height: 30px;
background-color: orange;
position: relative;
margin-top: 5px;
margin-bottom: 5px;
}
#stopButton {
width: 60px;
height: 30px;
background-color: yellow;
position: relative;
margin-top: 5px;
margin-bottom: 5px;
}在这个示例中，poi_back_animation的begin="0s"使其在页面加载后自动开始并无限循环。而poi_front_animation的begin="indefinite"则使其等待用户点击“START”按钮通过beginElement()方法来启动，点击“STOP”按钮通过endElement()方法来停止。
优化SMIL动画结构
原始的SMIL动画常常通过链式触发（例如begin="0s;poi_back_2.end"）来实现交替动画。这种方式虽然可行，但在管理和调试上会增加复杂性，尤其是在需要手动控制时，endEvent的触发可能会意外重启动画。
合并交替动画
更简洁的实践是将两个交替的动画合并为一个
例如，如果动画在状态A和状态B之间交替，我们可以定义values="StateA;StateB;StateA"，并设置keyTimes="0;0.5;1"。这样，动画将在dur时间内从A到B再回到A，完成一个完整的循环。
优化前的结构 (两个交替动画):
优化后的结构 (一个合并动画):
repeatCount="indefinite" begin="0s" />
通过这种方式，动画逻辑变得更加清晰，也更容易通过beginElement()和endElement()进行控制，因为只有一个动画元素需要管理。
fill="freeze" 的作用
当动画结束时，元素的属性通常会恢复到动画开始前的状态。如果希望动画结束后元素保持其最终状态，可以在
完整示例代码
以下是结合上述所有优化和控制策略的完整示例代码。
SVG SMIL动画精确控制
