控制SVG中SMIL动画的暂停与启动

在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。为了简化控制，可以将这两个动画合并为一个。

笔尖Ai写作

AI智能写作，1000+写作模板，轻松原创，拒绝写作焦虑！一款在线Ai写作生成器

下载

1. 合并values属性： 将两个动画的values属性合并为一个，使用分号分隔，形成"...state1...;...state2...;...state1..."的格式。
2. 设置keyTimes属性： 为合并后的values属性设置对应的keyTimes属性，确保keyTimes的数量与values的数量一致，并按升序排列，例如"0;0.5;1"。
3. 调整dur属性： 将动画的dur属性设置为原始单个动画时长的两倍。
4. 设置repeatCount属性： 设置repeatCount="indefinite"，使动画无限循环播放。
5. 控制动画的启动方式： 如果希望动画自动播放，则设置begin="0s"。如果希望通过JavaScript控制动画的启动，则设置begin="indefinite"。

以下是修改后的SVG代码示例：

完整示例

    
    


    START
    STOP
    

    

注意事项

• 确保你的SVG文档正确引入了SMIL动画所需的命名空间。
• keyTimes属性的值必须与values属性的值一一对应。
• 使用ElementTimeControl接口控制动画时，无法在动画的中间状态暂停和恢复。
• beginElement()和endElement()方法只能在begin属性设置为indefinite的动画上使用。
• 如果希望在动画停止后保持在屏幕上，可以设置fill="freeze"。

总结

通过本文，你学习了如何精确控制SVG中的SMIL动画，包括使用ElementTimeControl接口控制单个动画的启动和停止，以及如何通过优化动画结构来简化控制流程。掌握这些技术可以帮助你创建更复杂、更具交互性的SVG动画。