在SVG中，使用SMIL动画可以为图形元素添加动态效果。然而，在需要对多个动画进行独立控制时，直接使用pauseAnimations()和unpauseAnimations()可能会遇到问题，因为它们会影响整个SVG文档中的所有动画。本文将介绍如何更精确地控制SVG中的SMIL动画，包括暂停、启动特定动画，以及优化动画结构以简化控制。
理解pauseAnimations()和unpauseAnimations()的局限性
pauseAnimations()和unpauseAnimations()方法是SVGSVGElement接口提供的，它们分别用于暂停和恢复SVG文档中的所有动画。这意味着，如果你只想控制某个特定元素的动画，这两个方法就显得过于宽泛。
// 暂停SVG文档中的所有动画 document.getElementById("svg").pauseAnimations(); // 恢复SVG文档中的所有动画 document.getElementById("svg").unpauseAnimations();
使用ElementTimeControl接口控制单个动画
要实现对单个动画的精确控制，可以使用ElementTimeControl接口。该接口提供了beginElement()和endElement()方法，分别用于启动和停止动画。需要注意的是，这种方式无法在动画的中间状态暂停和恢复，只能控制动画的开始和结束。
// 获取需要控制的动画元素 var poiFront1 = document.getElementById("poi_front_1"); // 启动动画 poiFront1.beginElement(); // 停止动画 poiFront1.endElement();
优化动画结构：合并交替动画
在某些情况下，SVG动画可能由多个交替进行的动画组成，例如在提供的代码中，poi_front元素包含两个交替的动画poi_front_1和poi_front_2。为了简化控制，可以将这两个动画合并为一个。
- 合并values属性： 将两个动画的values属性合并为一个，使用分号分隔，形成”…state1…;…state2…;…state1…”的格式。
- 设置keyTimes属性： 为合并后的values属性设置对应的keyTimes属性，确保keyTimes的数量与values的数量一致，并按升序排列，例如”0;0.5;1″。
- 调整dur属性： 将动画的dur属性设置为原始单个动画时长的两倍。
- 设置repeatCount属性： 设置repeatCount=”indefinite”，使动画无限循环播放。
- 控制动画的启动方式： 如果希望动画自动播放，则设置begin=”0s”。如果希望通过JavaScript控制动画的启动，则设置begin=”indefinite”。
以下是修改后的SVG代码示例：
<path fill="#739a00"> <animate id="poi_front_1" 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-13.139-7.1302-16.488-52.947-12.538-86.979 5.0508-31.611 16.066-81.443 8.0879-80.41-5.0508z; 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; 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-13.139-7.1302-16.488-52.947-12.538-86.979 5.0508-31.611 16.066-81.443 8.0879-80.41-5.0508z" keyTimes="0;0.5;1" begin="indefinite" dur="3s" repeatCount="indefinite" /> </path>
完整示例
<!DOCTYPE html> <html> <head> <title>SVG Animation Control</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; } #button{ width: 60px; height: 30px; background-color: orange; position: relative; margin-top: 5px; margin-bottom: 5px; } #button2{ width: 60px; height: 30px; background-color: yellow; position: relative; margin-top: 5px; margin-bottom: 5px; } </style> </head> <body> <button id="button">START</button> <button id="button2">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_1" 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_1" 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-13.139-7.1302-16.488-52.947-12.538-86.979 5.0508-31.611 16.066-81.443 8.0879-80.41-5.0508z; 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; 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-13.139-7.1302-16.488-52.947-12.538-86.979 5.0508-31.611 16.066-81.443 8.0879-80.41-5.0508z" keyTimes="0;0.5;1" begin="indefinite" dur="3s" repeatCount="indefinite" /> </path> </g> <!--End Poison Front--> </svg> <script> var poiFront1 = document.getElementById("poi_front_1"); document.getElementById("button").onclick = function (){ poiFront1.beginElement(); } document.getElementById("button2").onclick = function (){ poiFront1.endElement(); } </script> </body> </html>
注意事项
- 确保你的SVG文档正确引入了SMIL动画所需的命名空间。
- keyTimes属性的值必须与values属性的值一一对应。
- 使用ElementTimeControl接口控制动画时，无法在动画的中间状态暂停和恢复。
- beginElement()和endElement()方法只能在begin属性设置为indefinite的动画上使用。
- 如果希望在动画停止后保持在屏幕上，可以设置fill=”freeze”。
总结
通过本文，你学习了如何精确控制SVG中的SMIL动画，包括使用ElementTimeControl接口控制单个动画的启动和停止，以及如何通过优化动画结构来简化控制流程。掌握这些技术可以帮助你创建更复杂、更具交互性的SVG动画。
评论（已关闭）
评论已关闭