本文旨在解决如何精确控制SVG中特定SMIL动画的暂停与运行，同时保持其他动画的连续播放。文章将深入探讨pauseAnimations()和unpauseAnimations()方法的局限性，并介绍如何利用ElementTimeControl接口的beginElement()和endElement()方法实现对单个动画的精细控制。此外，还将提供优化SMIL动画结构，简化动画控制逻辑的实用技巧。
在SVG中，使用pauseAnimations()和unpauseAnimations()方法只能作用于<svg>元素本身，它们会暂停或恢复SVG文档中所有的动画元素。这意味着无法直接通过这些方法单独控制特定动画的播放状态。
例如，以下代码会暂停或恢复整个SVG文档的动画：
document.getElementById("svg").pauseAnimations();
document.getElementById("svg").unpauseAnimations();要实现对单个动画的精确控制，我们需要使用ElementTimeControl接口，该接口提供了beginElement()和endElement()方法。这些方法允许我们启动或停止特定的<animate>元素。
以下代码演示了如何使用beginElement()和endElement()方法控制id为"poi_front_1"的动画：
var poiFront1 = document.getElementById("poi_front_1")
document.getElementById("button").onclick = function (){
poiFront1.beginElement();
}
document.getElementById("button2").onclick = function (){
poiFront1.endElement();
}当动画需要在两个状态之间循环切换时，可以考虑将两个独立的<animate>元素合并为一个。通过使用values、keyTimes、dur和repeatCount属性，可以更简洁地定义动画的行为。
例如，可以将以下两个<animate>元素：
<animate
id="poi_front_1"
attributeName="d"
values="...state1...;...state2..."
begin="0s;poi_front_2.end"
dur="1.5s"
/>
<animate
id="poi_front_2"
attributeName="d"
values="...state2...;...state1..."
begin="poi_front_1.end"
dur="1.5s"
/>合并为：
<animate
id="poi_front_1"
attributeName="d"
values="...state1...;...state2...;...state1..."
keyTimes="0;0.5;1"
begin="0s" // 或 "indefinite"
dur="3s"
repeatCount="indefinite"
/>在这个例子中：
HTML代码
<button id="button">START</button> <button id="button2">STOP</button>
JavaScript代码
var poiFront1 = document.getElementById("poi_front_1")
document.getElementById("button").onclick = function (){
poiFront1.beginElement();
}
document.getElementById("button2").onclick = function (){
poiFront1.endElement();
}SVG代码
<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>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;
}
#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;
}通过理解pauseAnimations()和unpauseAnimations()方法的局限性，并掌握ElementTimeControl接口的使用，可以实现对SVG中SMIL动画的精细控制。此外，优化动画结构可以简化控制逻辑，提高代码的可维护性。在实际应用中，请根据具体需求选择合适的动画控制策略。
以上就是控制SVG中SMIL动画的暂停与运行的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
940
收藏
