本教程详细探讨了如何在SVG中精确控制SMIL动画，特别是针对特定元素进行暂停和播放。文章纠正了常见的误区，如SVGSVGElement的全局动画控制，并介绍了通过ElementTimeControl接口的beginElement()和endElement()方法实现单个动画的精细化管理。同时，教程还提供了优化动画结构、简化交替动画以及确保动画行为一致性的最佳实践。
SMIL动画基础与常见误区
在svg中，smil（synchronized multimedia integration language）提供了一种声明式的方式来定义动画。然而，在实际应用中，开发者常会遇到一些关于动画控制的误区。
values 与 keyTimes 属性的配对使用
使用元素进行动画时，如果指定了values属性来定义动画的关键帧值序列，那么必须同时提供一个对应的keyTimes属性。keyTimes属性定义了values列表中每个值的发生时间点，其值应为介于0和1之间的分号分隔的递增数字序列，且数量必须与values中的值数量相同。
例如，如果values=”value1;value2″，则keyTimes必须是”0;1″。如果values=”value1;value2;value3″，则keyTimes可以是”0;0.5;1″。如果省略keyTimes，或者其值与values不匹配，动画可能无法正常播放或控制。
错误示例 (缺少 keyTimes):
正确示例 (添加 keyTimes):
SVGSVGElement 级别的动画控制
SVG DOM提供了SVGSVGElement接口，其中包含pauseAnimations()和unpauseAnimations()方法。这些方法的作用是暂停或恢复整个SVG元素内部的所有SMIL动画。这意味着，如果你在一个包含多个动画的SVG根元素上调用这些方法，所有动画都会被同时暂停或恢复。
例如，以下代码将暂停或恢复ID为svg的SVG元素内的所有动画：
document.getElementById("svg").pauseAnimations(); // 暂停所有动画document.getElementById("svg").unpauseAnimations(); // 恢复所有动画
这种全局控制方式无法满足只控制特定动画的需求，例如在一个SVG中，一部分动画需要持续运行，而另一部分则需要用户交互来控制。
精确控制单个SMIL动画
要实现对SVG中单个SMIL动画的精确控制，我们需要利用ElementTimeControl接口提供的方法，这些方法可以直接在元素上调用。
ElementTimeControl 接口及其方法
ElementTimeControl接口提供了以下关键方法来控制单个动画的播放：
beginElement(): 启动动画。如果动画已经处于活动状态，调用此方法会使其重新开始。endElement(): 结束动画。调用此方法会立即停止动画，并使其回到初始状态（除非设置了fill=”freeze”）。
需要注意的是，beginElement()和endElement()提供了动画的开始和结束控制，但它们不提供像视频播放器那样的“暂停”在中间状态的功能。要实现类似暂停的效果，通常需要结合其他技术，或者重新设计动画逻辑。
示例：通过按钮控制特定动画
假设我们有一个SVG，其中包含两组动画：poi_back 组的动画需要持续运行，而 poi_front 组的动画则需要通过按钮来控制其开始和停止。
首先，确保你的元素具有唯一的id，以便通过JavaScript获取其引用。对于需要手动控制的动画，将其begin属性设置为”indefinite”，表示它不会自动开始，需要通过beginElement()手动触发。
HTML结构:
<animate id="poi_back_animation" attributeName="d" values="m 62.692,157.03 c ... 初始状态 ...; m 62.692,157.03 c ... 中间状态 ...; m 62.692,157.03 c ... 初始状态 ..." keyTimes="0;0.5;1" begin="0s" dur="3s" repeatCount="indefinite" /> <animate id="poi_front_animation" attributeName="d" values="m62.692 157.03c ... 初始状态 ...; m 62.692,157.03 c ... 中间状态 ...; m62.692 157.03c ... 初始状态 ..." keyTimes="0;0.5;1" begin="indefinite" dur="3s" repeatCount="indefinite" fill="freeze" />
JavaScript控制逻辑:
// 获取需要控制的动画元素const poiFrontAnimation = document.getElementById("poi_front_animation");// 为按钮添加事件监听器document.getElementById("startButton").onclick = function() { poiFrontAnimation.beginElement(); // 启动 poi_front 动画}; document.getElementById("stopButton").onclick = function() { poiFrontAnimation.endElement(); // 停止 poi_front 动画};
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;} #startButton { width: 60px; height: 30px; background-color: orange; position: relative; margin-top: 5px; margin-bottom: 5px;}#stopButton { width: 60px; height: 30px; background-color: yellow; position: relative; margin-top: 5px; margin-bottom: 5px;}
在这个示例中，poi_back_animation的begin=”0s”使其在页面加载后自动开始并无限循环。而poi_front_animation的begin=”indefinite”则使其等待用户点击“START”按钮通过beginElement()方法来启动，点击“STOP”按钮通过endElement()方法来停止。
优化SMIL动画结构
原始的SMIL动画常常通过链式触发（例如begin=”0s;poi_back_2.end”）来实现交替动画。这种方式虽然可行，但在管理和调试上会增加复杂性，尤其是在需要手动控制时，endEvent的触发可能会意外重启动画。
合并交替动画
更简洁的实践是将两个交替的动画合并为一个元素。这可以通过扩展values和keyTimes属性来实现。
例如，如果动画在状态A和状态B之间交替，我们可以定义values=”StateA;StateB;StateA”，并设置keyTimes=”0;0.5;1″。这样，动画将在dur时间内从A到B再回到A，完成一个完整的循环。
优化前的结构 (两个交替动画):
优化后的结构 (一个合并动画):
<animate id="single_anim" attributeName="d" values="StateA;StateB;StateA" keyTimes="0;0.5;1" dur="3s" repeatCount="indefinite" begin="0s" />
通过这种方式，动画逻辑变得更加清晰，也更容易通过beginElement()和endElement()进行控制，因为只有一个动画元素需要管理。
fill=”freeze” 的作用
当动画结束时，元素的属性通常会恢复到动画开始前的状态。如果希望动画结束后元素保持其最终状态，可以在元素上设置fill=”freeze”属性。这在停止一个动画后，希望其停留在动画的最后一帧时非常有用。
完整示例代码
以下是结合上述所有优化和控制策略的完整示例代码。
SVG SMIL动画精确控制 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; } #startButton { width: 60px; height: 30px; background-color: orange; position: relative; margin-top: 5px; margin-bottom: 5px; } #stopButton { width: 60px; height: 30px; background-color: yellow; position: relative; margin-top: 5px; margin-bottom: 5px; } <animate id="poi_back_animation" 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" /> <animate id="poi_front_animation" 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
以上就是SVG SMIL动画的精确控制与优化实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573353.html
微信扫一扫 
支付宝扫一扫 
