本教程详细探讨了如何在SVG中精确控制SMIL动画，特别是针对特定元素进行暂停和播放。文章纠正了常见的误区，如SVGSVGElement的全局动画控制，并介绍了通过ElementTimeControl接口的beginElement()和endElement()方法实现单个动画的精细化管理。同时，教程还提供了优化动画结构、简化交替动画以及确保动画行为一致性的最佳实践。
SMIL动画基础与常见误区
在svg中，smil（synchronized multimedia integration language）提供了一种声明式的方式来定义动画。然而，在实际应用中，开发者常会遇到一些关于动画控制的误区。
values 与 keyTimes 属性的配对使用
使用<animate>元素进行动画时，如果指定了values属性来定义动画的关键帧值序列，那么必须同时提供一个对应的keyTimes属性。keyTimes属性定义了values列表中每个值的发生时间点，其值应为介于0和1之间的分号分隔的递增数字序列，且数量必须与values中的值数量相同。
例如，如果values=”value1;value2″，则keyTimes必须是”0;1″。如果values=”value1;value2;value3″，则keyTimes可以是”0;0.5;1″。如果省略keyTimes，或者其值与values不匹配，动画可能无法正常播放或控制。
错误示例 (缺少 keyTimes):
<animate attributeName="d" values="pathData1;pathData2" dur="1.5s"/>
正确示例 (添加 keyTimes):
<animate attributeName="d" values="pathData1;pathData2" keyTimes="0;1" dur="1.5s"/>
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接口提供的方法，这些方法可以直接在<animate>元素上调用。
ElementTimeControl 接口及其方法
ElementTimeControl接口提供了以下关键方法来控制单个动画的播放：
- beginElement(): 启动动画。如果动画已经处于活动状态，调用此方法会使其重新开始。
- endElement(): 结束动画。调用此方法会立即停止动画，并使其回到初始状态（除非设置了fill=”freeze”）。
需要注意的是，beginElement()和endElement()提供了动画的开始和结束控制，但它们不提供像视频播放器那样的“暂停”在中间状态的功能。要实现类似暂停的效果，通常需要结合其他技术，或者重新设计动画逻辑。
示例：通过按钮控制特定动画
假设我们有一个SVG，其中包含两组动画：poi_back 组的动画需要持续运行，而 poi_front 组的动画则需要通过按钮来控制其开始和停止。
首先，确保你的<animate>元素具有唯一的id，以便通过JavaScript获取其引用。对于需要手动控制的动画，将其begin属性设置为”indefinite”，表示它不会自动开始，需要通过beginElement()手动触发。
html结构:
<button id="startButton">START</button> <button id="stopButton">STOP</button> <svg width="100%" height="100%" version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" id="svg"> <!-- ... 省略瓶子路径 ... --> <!-- 后方动画 (持续运行) --> <path fill="#9bc300" id="poi_back"> <animate id="poi_back_animation" attributeName="d" values="m 62.692,157.03 c ... 初始状态 ...; m 62.692,157.03 c ... 中间状态 ...; m 62.692,157.03 c ... 初始状态 ..." keyTimes="0;0.5;1" begin="0s" <!-- 自动开始 --> dur="3s" repeatCount="indefinite" /> </path> <!-- 前方动画 (手动控制) --> <g id="poi_front"> <path fill="#739a00"> <animate id="poi_front_animation" attributeName="d" values="m62.692 157.03c ... 初始状态 ...; m 62.692,157.03 c ... 中间状态 ...; m62.692 157.03c ... 初始状态 ..." keyTimes="0;0.5;1" begin="indefinite" <!-- 手动控制 --> dur="3s" repeatCount="indefinite" fill="freeze" <!-- 动画结束后保持最终状态 --> /> </path> </g> </svg>
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的触发可能会意外重启动画。
合并交替动画
更简洁的实践是将两个交替的动画合并为一个<animate>元素。这可以通过扩展values和keyTimes属性来实现。
例如，如果动画在状态A和状态B之间交替，我们可以定义values=”StateA;StateB;StateA”，并设置keyTimes=”0;0.5;1″。这样，动画将在dur时间内从A到B再回到A，完成一个完整的循环。
优化前的结构 (两个交替动画):
<animate id="anim_1" attributeName="d" values="StateA;StateB" begin="0s;anim_2.end" dur="1.5s"/> <animate id="anim_2" attributeName="d" values="StateB;StateA" begin="anim_1.end" dur="1.5s"/>
优化后的结构 (一个合并动画):
<animate id="single_anim" attributeName="d" values="StateA;StateB;StateA" keyTimes="0;0.5;1" dur="3s" <!-- 时长翻倍 --> repeatCount="indefinite" begin="0s" <!-- 或 "indefinite" --> />
通过这种方式，动画逻辑变得更加清晰，也更容易通过beginElement()和endElement()进行控制，因为只有一个动画元素需要管理。
fill=”freeze” 的作用
当动画结束时，元素的属性通常会恢复到动画开始前的状态。如果希望动画结束后元素保持其最终状态，可以在<animate>元素上设置fill=”freeze”属性。这在停止一个动画后，希望其停留在动画的最后一帧时非常有用。
完整示例代码
以下是结合上述所有优化和控制策略的完整示例代码。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG SMIL动画精确控制</title> <style> 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; } </style> </head> <body> <button id="startButton">START</button> <button id="stopButton">STOP</button> <svg width="100%" height="100%" version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" id="svg" > <!--Begin Bottle --> <path d="m166.76 57.45c-13.062-0.0623-26.955 0.73204-46.311 0.0859-2.7685-0.0924-5 2.23-5 5v10.709c-2e-5 2.77 2.23 5 5 5h4.7226v6.209a88.388 88.388 0 0 0 -67.176 85.715 88.388 88.388 0 0 0 88.389 88.389 88.388 88.388 0 0 0 88.389 -88.389 88.388 88.388 0 0 0 -67.176 -85.695v-6.2285h4.7227c2.77 0 5-2.23 5-5v-10.709c0-2.77-2.231-4.9242-5-5-1.8457-0.0506-3.6945-0.077-5.5606-0.0859z" fill="#1b000c"/> <path d="m231.11 170.17c0 46.793-37.933 84.727-84.727 84.727-46.793 0-84.727-37.933-84.727-84.727-1e-6 -40.912 28.997-75.051 67.559-82.986 12.071 2.5421 23.795 1.9463 35.395 0.22531 38.033 8.3382 66.499 42.225 66.499 82.761z" fill="#270600"/> <path d="m122.57 61.1c16.221 0.59986 32.004 0.30589 47.553 0 1.8278-0.036 3.3 1.4718 3.3 3.3v6.2541c0 1.8282-1.4718 3.3-3.3 3.3h-47.553c-1.8282 0-3.3-1.4718-3.3-3.3v-6.2541c0-1.8282 1.473-3.3676 3.3-3.3z" fill="#270600"/> <path d="m129.08 77.57v6.0117c9.8102 2.4161 28.289 2.4275 35 0v-6.0117z" fill="#270600"/> <!--End Bottle --> <!--Begin Poison Back (持续运行)--> <path fill="#9bc300" id="poi_back"> <animate id="poi_back_animation" attributeName="d" values="m 62.692,157.03 c -0.66726,4.2839 -1.0332,8.6677 -1.0332,13.139 2e-6,46.793 37.933,84.727 84.727,84.727 46.793,0 84.727,-37.933 84.727,-84.727 0,-4.4706 -0.36411,-8.8552 -1.0312,-13.139 -14.83662,12.68631 -46.3415,32.04916 -110.09827,6.15172 C 55.89527,130.25689 61.6596,170.1687 62.6926,157.03 Z; m 62.692,157.03 c 0.858416,-8.12931 -0.379575,2.34105 -1.0332,13.139 -2.827316,46.70751 37.933,84.727 84.727,84.727 46.793,0 84.727,-37.933 84.727,-84.727 0,-4.4706 -0.36411,-8.8552 -1.0312,-13.139 -8.28777,2.68817 -30.19905,-24.60832 -80.45959,1.45473 C 92.556926,187.6518 60.557883,163.01304 61.6588,170.169 Z;m 62.692,157.03 c -0.66726,4.2839 -1.0332,8.6677 -1.0332,13.139 2e-6,46.793 37.933,84.727 84.727,84.727 46.793,0 84.727,-37.933 84.727,-84.727 0,-4.4706 -0.36411,-8.8552 -1.0312,-13.139 -14.83662,12.68631 -46.3415,32.04916 -110.09827,6.15172 C 55.89527,130.25689 61.6596,170.1687 62.6926,157.03 Z" keyTimes="0;0.5;1" begin="0s" <!-- 自动开始 --> dur="3s" repeatCount="indefinite" /> </path> <!--End Poison Back--> <!--Begin Poison Front (手动控制)--> <g id="poi_front"> <path fill="#739a00"> <animate id="poi_front_animation" attributeName="d" values="m62.692 157.03c-0.66726 4.2839-1.0332 8.6677-1.0332 13.139 2e-6 46.793 37.933 84.727 84.727 84.727 46.793 0 84.727-37.933 84.727-84.727 0-4.4706-0.36411-8.8552-1.0312
