在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代码示例：
完整示例
SVG Animation Control 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; } var poiFront1 = document.getElementById("poi_front_1"); document.getElementById("button").onclick = function (){ poiFront1.beginElement(); } document.getElementById("button2").onclick = function (){ poiFront1.endElement(); }
注意事项
确保你的SVG文档正确引入了SMIL动画所需的命名空间。keyTimes属性的值必须与values属性的值一一对应。使用ElementTimeControl接口控制动画时，无法在动画的中间状态暂停和恢复。beginElement()和endElement()方法只能在begin属性设置为indefinite的动画上使用。如果希望在动画停止后保持在屏幕上，可以设置fill=”freeze”。
总结
通过本文，你学习了如何精确控制SVG中的SMIL动画，包括使用ElementTimeControl接口控制单个动画的启动和停止，以及如何通过优化动画结构来简化控制流程。掌握这些技术可以帮助你创建更复杂、更具交互性的SVG动画。
以上就是控制SVG中SMIL动画的暂停与启动的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573312.html
微信扫一扫 
支付宝扫一扫 
