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

本文旨在解决如何精确控制SVG中特定SMIL动画的暂停与运行，同时保持其他动画的连续播放。文章将深入探讨pauseAnimations()和unpauseAnimations()方法的局限性，并介绍如何利用ElementTimeControl接口的beginElement()和endElement()方法实现对单个动画的精细控制。此外，还将提供优化SMIL动画结构，简化动画控制逻辑的实用技巧。

理解动画控制的局限性

在SVG中，使用pauseAnimations()和unpauseAnimations()方法只能作用于所有的动画元素。这意味着无法直接通过这些方法单独控制特定动画的播放状态。

例如，以下代码会暂停或恢复整个SVG文档的动画：

document.getElementById("svg").pauseAnimations();
document.getElementById("svg").unpauseAnimations();

使用ElementTimeControl接口控制单个动画

要实现对单个动画的精确控制，我们需要使用ElementTimeControl接口，该接口提供了beginElement()和endElement()方法。这些方法允许我们启动或停止特定的元素。

以下代码演示了如何使用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();
}

优化SMIL动画结构

当动画需要在两个状态之间循环切换时，可以考虑将两个独立的元素合并为一个。通过使用values、keyTimes、dur和repeatCount属性，可以更简洁地定义动画的行为。

例如，可以将以下两个元素：

合并为：

Kive

一站式AI图像生成和管理平台

下载

在这个例子中：

• values属性包含了动画的起始状态、中间状态和结束状态（与起始状态相同，用于循环）。
• keyTimes属性定义了每个状态对应的时间点，这里将动画分为三个阶段，每个阶段占据总时间的1/2。
• dur属性设置为3秒，是原始两个动画时长的总和。
• repeatCount="indefinite" 确保动画无限循环。
• begin="0s" 设置为自动开始，设置为 "indefinite" 可以使用 beginElement() 和 endElement() 控制。

HTML代码

START
STOP

JavaScript代码

var poiFront1 = document.getElementById("poi_front_1")

document.getElementById("button").onclick = function (){
    poiFront1.beginElement();
}   

document.getElementById("button2").onclick = function (){
    poiFront1.endElement();
}

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;
}

额外技巧

• keyTimes属性: 确保keyTimes属性的值的数量与values属性的值的数量一致，并且按照升序排列（从0到1）。
• fill="freeze": 如果希望动画在停止后保持在最终状态，可以设置fill="freeze"。
• 事件处理: 使用beginElement()和endElement()方法时，注意处理可能的事件冲突，确保动画状态的正确切换。

总结

通过理解pauseAnimations()和unpauseAnimations()方法的局限性，并掌握ElementTimeControl接口的使用，可以实现对SVG中SMIL动画的精细控制。此外，优化动画结构可以简化控制逻辑，提高代码的可维护性。在实际应用中，请根据具体需求选择合适的动画控制策略。