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

本文旨在解决在SVG中控制特定SMIL动画的暂停与运行的问题。我们将探讨如何通过JavaScript来精确控制SVG动画，包括修正动画属性、理解SVG动画的控制方式，以及如何使用ElementTimeControl接口来实现动画的启动与停止，并提供优化动画结构的方法，以简化控制逻辑。

SMIL动画控制的关键点

在SVG中，SMIL（Synchronized Multimedia Integration Language）动画提供了强大的动画控制能力。然而，要实现对特定动画的精确控制，需要理解以下几个关键点：

1. keyTimes 属性: 当 元素使用 values 属性时，必须同时使用 keyTimes 属性，且值的数量必须与 values 属性中的值数量一致。keyTimes 用于定义动画在每个值上花费的时间比例，取值范围为 0 到 1。

2. pauseAnimations() 和 unpauseAnimations() 方法: 这两个方法只能应用于 所有的动画，无法针对单个动画进行操作。

3. ElementTimeControl 接口: 如果需要控制单个动画，应使用 ElementTimeControl 接口，它提供了 beginElement() 和 endElement() 方法，分别用于启动和停止动画。

修正动画属性

首先，确保你的 元素正确使用了 keyTimes 属性。如果使用了 values 属性，那么 keyTimes 属性是必需的。例如：

在这个例子中，动画在 value1 和 value2 之间过渡，keyTimes="0; 1" 表示动画在 0% 的时间点显示 value1，在 100% 的时间点显示 value2。

Kive

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

下载

使用 ElementTimeControl 接口控制动画

要控制单个动画，首先需要获取 元素的引用，然后使用 beginElement() 和 endElement() 方法。

var poiFront1 = document.getElementById("poi_front_1");
var poiFront2 = document.getElementById("poi_front_2");

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

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

在这个例子中，我们通过 document.getElementById() 获取了 poi_front_1 和 poi_front_2 这两个动画元素的引用。然后，通过按钮的点击事件，分别调用 beginElement() 和 endElement() 方法来启动和停止动画。

优化动画结构

如果你的动画由多个交替进行的动画片段组成，可以考虑将它们合并成一个动画，使用 values 和 keyTimes 属性来定义多个状态，并使用 repeatCount="indefinite" 使动画无限循环。

在这个例子中，动画在 state1 和 state2 之间交替进行，keyTimes="0; 0.5; 1" 表示动画在 0% 的时间点显示 state1，在 50% 的时间点显示 state2，在 100% 的时间点再次显示 state1。begin="indefinite" 表示动画初始状态为停止，需要通过 beginElement() 方法启动。

完整示例

以下是一个完整的示例，展示了如何使用 ElementTimeControl 接口来控制SVG动画的启动与停止：

START
STOP

注意事项

• 确保你的SVG元素和动画元素都有唯一的ID，以便通过 document.getElementById() 正确获取它们的引用。
• beginElement() 和 endElement() 方法只能在动画元素上调用，不能在 SVG 元素上调用。
• 如果动画没有启动，检查 begin 属性是否设置为 indefinite。

总结

通过本文，你学习了如何精确控制SVG中的SMIL动画。关键在于理解 keyTimes 属性的重要性，以及如何使用 ElementTimeControl 接口的 beginElement() 和 endElement() 方法来启动和停止动画。同时，优化动画结构可以简化控制逻辑，提高代码的可维护性。