文章导读

控制SVG中特定SMIL动画的暂停与运行

作者 2025年8月23日 16

本文旨在解决在SVG中控制特定SMIL动画的暂停与运行的问题。我们将探讨如何通过JavaScript来精确控制SVG动画，包括修正动画属性、理解SVG动画的控制方式，以及如何使用ElementTimeControl接口来实现动画的启动与停止，并提供优化动画结构的方法，以简化控制逻辑。

SMIL动画控制的关键点

在SVG中，SMIL（Synchronized Multimedia Integration Language）动画提供了强大的动画控制能力。然而，要实现对特定动画的精确控制，需要理解以下几个关键点：

keyTimes 属性: 当 <animate> 元素使用 values 属性时，必须同时使用 keyTimes 属性，且值的数量必须与 values 属性中的值数量一致。keyTimes 用于定义动画在每个值上花费的时间比例，取值范围为 0 到 1。
pauseAnimations() 和 unpauseAnimations() 方法: 这两个方法只能应用于 <svg> 元素，它们会暂停或恢复 SVG 元素中所有的动画，无法针对单个动画进行操作。
ElementTimeControl 接口: 如果需要控制单个动画，应使用 ElementTimeControl 接口，它提供了 beginElement() 和 endElement() 方法，分别用于启动和停止动画。

修正动画属性

首先，确保你的 <animate> 元素正确使用了 keyTimes 属性。如果使用了 values 属性，那么 keyTimes 属性是必需的。例如：

<animate     attributeName="d"     values="value1; value2"     keyTimes="0; 1"     dur="1.5s" />

在这个例子中，动画在 value1 和 value2 之间过渡，keyTimes=”0; 1″ 表示动画在 0% 的时间点显示 value1，在 100% 的时间点显示 value2。

使用 ElementTimeControl 接口控制动画

要控制单个动画，首先需要获取 <animate> 元素的引用，然后使用 beginElement() 和 endElement() 方法。

var poiFront1 = document.getElementById("poi_front_1"); var poiFront2 = document.getElementById("poi_front_2");  document.getElementById("button").onclick = function (){     poiFront1.beginElement(); }     document.getElementById("button2").onclick = function (){     poiFront1.endElement(); }

在这个例子中，我们通过 document.getElementById() 获取了 poi_front_1 和 poi_front_2 这两个动画元素的引用。然后，通过按钮的点击事件，分别调用 beginElement() 和 endElement() 方法来启动和停止动画。

优化动画结构

如果你的动画由多个交替进行的动画片段组成，可以考虑将它们合并成一个动画，使用 values 和 keyTimes 属性来定义多个状态，并使用 repeatCount=”indefinite” 使动画无限循环。

<animate     id="poi_front_1"     attributeName="d"     values="state1; state2; state1"     keyTimes="0; 0.5; 1"     begin="indefinite"     dur="3s"     repeatCount="indefinite" />

在这个例子中，动画在 state1 和 state2 之间交替进行，keyTimes=”0; 0.5; 1″ 表示动画在 0% 的时间点显示 state1，在 50% 的时间点显示 state2，在 100% 的时间点再次显示 state1。begin=”indefinite” 表示动画初始状态为停止，需要通过 beginElement() 方法启动。

完整示例

以下是一个完整的示例，展示了如何使用 ElementTimeControl 接口来控制SVG动画的启动与停止：

<!DOCTYPE html> <html> <head> <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元素和动画元素都有唯一的ID，以便通过 document.getElementById() 正确获取它们的引用。
beginElement() 和 endElement() 方法只能在动画元素上调用，不能在 SVG 元素上调用。
如果动画没有启动，检查 begin 属性是否设置为 indefinite。

总结

通过本文，你学习了如何精确控制SVG中的SMIL动画。关键在于理解 keyTimes 属性的重要性，以及如何使用 ElementTimeControl 接口的 beginElement() 和 endElement() 方法来启动和停止动画。同时，优化动画结构可以简化控制逻辑，提高代码的可维护性。

评论（已关闭）

评论已关闭

Hello! 欢迎来到悠悠畅享网！