Javascript 多次运行Snap.svg动画以不同的值结束

我有一个圆圈。我想创建一个函数，将其从1缩放到0.8，再返回到1。我现在所做的工作正常，但当我连续几次调用它时，几乎没有延迟，动画冲突，圆圈以不同的较小比例结束

在进行所有缩放操作时，我希望圆保持在其位置。此外，我希望缩放是与一个锚点在圆的中心完成。目前情况就是这样

看一看

由于上述原因，我得到了圆的当前变换：

var trans = elem.attr("transform");

重置其比例：

trans.totalMatrix.scale(1);

并应用它：

elem.attr({transform: trans});

然后，在本例中，我将动画设置为所需的比例0.8，如下所示：

transform: "s" + scale + "," + scale + trans

完成后，我将使用比例1设置回原始变换的动画：

动画运行几次后，圆以较小的比例结束。为什么?

编辑：

---

动画之间的延迟有意小于动画本身的长度。我的问题是，尽管如此，如何使动画工作。

我更改了bounce和setInterval函数，就像这样，它工作得很好。setInterval time必须大于500ms我使用了550ms，在animate函数的回调中，您不应该再次使用0.8的比例，您必须将其返回到默认比例，即1:

var bounce = function (elem, scale, duration) {
    var trans = elem.attr("transform");
    trans.totalMatrix.scale(1);

    elem.attr({
        transform: trans
    });

    elem.animate({
        transform: "s" + scale + "," + scale + trans
    }, duration * 0.33, mina.easeout, function () {
        elem.animate({
            transform: "s" + 1 + "," + 1 + trans // I changed the scale to 1
        }, duration * 0.67, mina.easein);
    });
};

var count = 0;
setInterval(function () {
    if (++count > 10) return;
    bounce(circ, .8, 500);
}, 550); // I canged this to 550

---

您的主要问题是setInterval中的值太短。在动画完成之前，您正在重新启动动画

如果不尝试合并两个变换，也可以将所有内容简化一点。将translate移动到父组，事情就变得更干净了

var snapelem=Snapsvg； circ=snapelem.selectmycirc； var bounce=功能元素、比例、持续时间{ 动画元素{ 变换：s+比例+，+比例 }，持续时间*0.33，最小值{ 动画元素{ 变换：s1,1 }，持续时间*0.67分钟； }; }; var计数=0； 设置间隔函数{ 如果++计数>10，则返回； 反弹系数为0.8500； }, 500;

---

您需要存储初始变换，否则在同一对象上有多个动画时，它们会被弄糊涂。因此，首先，您需要确保动画不重叠。我从其他评论中看到，这是一个示例的一部分，所以暂时将其放在一边，但请确保这不会发生在实时代码中：

因此可以存储转换

var trans = circ.attr("transform");

然后将其传递到func

bounce(circ, 0.8, 500, trans);

在函数中，使用

var bounce = function (elem, scale, duration, trans) {
....

---

我知道我将在动画完成之前重新启动动画。我在问，尽管如此，我怎样才能让它工作。我希望它总是以1度结束，无论何时播放。如果你使用我的代码并将setInterval值更改回200，你会看到它以1度结束。嗯，没有注意到这一点。但是，我使用live的SVG无法更改，因此转换必须在第一级进行。有没有办法让它以这种方式工作，并且仍然以比例1结束？也就是说，如何在保留初始转换的同时使其工作？对不起，我不太了解Snap，无法轻松回答这个问题。

var bounce = function (elem, scale, duration, trans) {
....