如何通过在svg中启动新循环来停止先前的动画
在SVG中，可以通过启动新的循环来停止先前的动画。这可以通过使用JavaScript的SMIL（可缩放矢量图形动画语言）来实现。以下是一个示例，展示了如何在SVG中通过启动新循环来停止先前的动画：
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="400">
<rect id="myRect" width="50" height="50" fill="blue">
<animate id="myAnimation" attributeName="width" from="50" to="200" dur="5s" repeatCount="indefinite"></animate>
</rect>
</svg>
<button onclick="stopAnimation()">停止动画</button>
<script>
function stopAnimation() {
var myRect = document.getElementById("myRect");
var myAnimation = document.getElementById("myAnimation");
myAnimation.beginElement(); // 启动新循环来停止先前的动画
myRect.setAttribute("fill", "red"); // 修改颜色以表示动画已停止
}
</script>
</body>
</html>上述代码中，我们定义了一个矩形元素<rect>，其中包含一个宽度属性的动画<animate>，它使矩形的宽度从50变为200，持续时间为5秒，并且重复无限次。在页面上，我们还添加了一个按钮<button>，用于停止动画。当用户点击按钮时，stopAnimation()函数会被触发。
在JavaScript函数stopAnimation()中，我们首先获取矩形元素和动画元素的引用。然后，我们使用beginElement()方法来启动一个新的循环，从而停止先前的动画。最后，我们通过修改矩形的填充颜色为红色来表示动画已停止。
这只是一个简单的示例，实际上可以根据具体的需求和场景来设计更复杂的动画控制逻辑。关于SVG动画的更多详细信息和示例，您可以参考腾讯云的SVG动画教程：SVG动画教程。
相关·内容
1回答
我有6个对象要设置动画。动画从加载页面的第一个圆圈开始，然后一个接一个地继续。重点是，它应该在任何时候通过单击任何圆圈重新启动，应该从那个圆圈开始，并且应该由右侧的下一个圆圈继续。问题是，在点击之后，前一个循环不会停止，并继续播放上一个和新的循环。我应该向代码中添加什么才能使其正常工作？ 我尝试添加不同的"end“属性值，但都不起作用 <?--
浏览 26提问于2019-05-23得票数 1
回答已采纳
我遇到了一个奇怪的问题，在已经运行的动画的同一个包含区域内启动jQuery动画会导致旧的动画停止。
请注意-问题不是多个动画同时运行，问题是在同一个容器标记中同时运行多个动画。由于任何原因，当另一个动画已经在相同的包含区域内运行时，启动另一个动画将导致<em
浏览 0提问于2018-11-02得票数 0
您可以不受限制地停止和重复动画，但如果重新启动不确定的动画，它将丢失其累积值并从初始值开始。360)" accumulate="sum" repeatCount="indefinite"如果我停止这个动画，并启动一个不同的
浏览 0提问于2012-10-03得票数 3
回答已采纳
1回答
对于SVG动画，我有一个相当有趣的问题。用于生成SVG表示法中的循环路径： var s = "M" + x + "," + (y-r)如果我从任何其他坐标(例如，沿着路径的一半)启动动画，那么对象在一个正确半径的圆圈中<
浏览 2提问于2010-04-13得票数 10
回答已采纳
这或多或少是一个基本的jQuery问题。我有鼠标功能。所以当我输入特定的容器时，动画就会启动。问题是，当我在几秒钟内输入这个容器10次时，动画就会被重复和重复…。下面是一个演示我的问题的视频：$('.project').mouseenter(function() { .find('.info').fadeIn{
浏览 3提问于2014-03-11得票数 0
回答已采纳
1回答
上下文:我正在编写SVG中的信息图表。我希望通过动画，特别是通过链接动画来实现这个文档。我已经熟悉SVG，但直到最近才开始学习SVG动画。fill="freeze"
repeatCount=&
浏览 5提问于2016-12-06得票数 3
回答已采纳
1回答
在“反应”中，如果我有一个基于单击按钮启动的动画，如何重新启动该动画？jsx
style={{animation: animationStyle }}
浏览 3提问于2017-10-07得票数 1
回答已采纳
2回答
循环CSS3动画
、、
我试图在三个元素之间循环一个css3动画，在第三个元素结束后，我想重新启动动画等等。这是我的密码： .oferta-prods.run-animation img{ animation-duration"> <img src=&q
浏览 2提问于2019-12-26得票数 0
回答已采纳
1回答
图像滚动到基于鼠标位置占窗口高度百分比的位置。在那一行我想要scrollingTo的改变因为在动画过程中，用户可以移动鼠标，更改scrollingTo变量。
浏览 2提问于2012-09-14得票数 0
我一直在用一个名为的库制作动画，这个库使用javascript和来动画SVG元素，而不是提供的 <animate>标记。
是否有方法将<svg>标记的内容转换为位图图像60帧每秒超过动画的范围？或者更好的方法是将对requestAnimationFrame的调用编译成电影？像这样的库首先将SVG转换为画布，这实际上是相同<
浏览 1提问于2020-08-30得票数 0
1回答
我使用D3.js库通过改变宽度来制作SVG矩形的动画：在其他浏览器中一切正常，但在Firefox中，当矩形宽度达到300px时，动画会突然停止。实际上，目标宽度(>=300)是多少并不重要，它总是在300px处停止<
浏览 1提问于2012-12-11得票数 1
回答已采纳
1回答
有一个像这样的动画从程序开始：tr.setFromValue(0.5);
tr.setToValue现在我想要一个函数来停止这一点，但只有在它淡出之后。这意味着当它下一次到达它的"to value“(或"from value")时，它应该停止动画。现在我知道我可以在下一次迭代中通过将循环<
浏览 17提问于2017-07-07得票数 0
回答已采纳
2回答
正如你在Fiddle中看到的：在我的HTML中，我有2行，每3行包含3个这样的块。如果您滑动这些行的鼠标，所有的块都会重复它们的悬停效果。$(".usp-hover&q
浏览 2提问于2017-12-05得票数 0
回答已采纳
我在AJAX web应用程序中使用SVG进行图表。当接收到初始数据时，我希望将图表元素(例如条形图)从默认的0值设置为新的数据值。如果用户选择了一个新的数据集，我会从服务器请求新的数据，然后希望将条形图从先前的值变为新值。如果我在SVG动画中设置了fill="remove"，那么每次加载新的
浏览 1提问于2011-06-28得票数 6
我正在使用beginPath()方法在画布上随机绘制小星星，如下所示： for(let i=0; i<100; i++){谢谢!看起来CSS并不是最好的选择。我想我会尝试用javaScript在一个setInterval循环中动画我的明星。这是我工作的代码。
浏览 3提问于2018-12-26得票数 1
回答已采纳
1回答
我使用SVG模板，我还想在其中集成html5动画。音频文件链接到SMIL动画。这只能用javascript来解决。如何将这两个源连接在一起？：(您可以在站点上看到，您必须单击按钮) svg</
浏览 33提问于2021-05-13得票数 2
我知道很多人已经问过如何在Android中显示GIF图像，但大多数答案都有很多问题：
他们使用不允许暂停(和恢复)动画的库，这是我想做的事情。目前最简单的方法是什么？
浏览 0提问于2015-11-10得票数 5
1回答
我有一个SVG设置作为一个链接的背景图像。当您悬停在链接上时，SVG将显示，动画只播放一次，然后停止。这很好，除非您第二次在链接上悬停(或者任何其他带有SVG背景的链接)，动画不会重新开始。是否有一种方法(除了将动画设置为循环)使SVG在每次悬停时重新启动？这是SVG的代码：
<?xml version=
浏览 6提问于2013-09-05得票数 1
回答已采纳
我正在尝试在input元素上实现一个加载动画。我希望在单击页面上的搜索按钮时触发动画，并在搜索返回时停止(在回调中)。由于我使用的是AngularJS，目前这是一个$http.get调用和相关的.success回调，因此我已经有了添加触发和停止的完美位置。
首先，条形图从左边滑动，直到它
浏览 1提问于2015-11-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
