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

我有一个圆圈。我想创建一个函数，将它从1缩放到0.8，然后回到1.我目前的工作方式是，但是当我连续多次调用它时，动画会发生冲突，并且圆圈会以不同的方式结束（小）规模。Snap.svg动画运行多次以不同的值结束

在做所有这些缩放的东西时，我希望圆圈保持在它的位置。另外，我希望缩放能够在圆的中心使用锚点完成。目前情况如此。

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

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

重置其规模：

trans.totalMatrix.scale(1);

，并将其应用：

elem.attr({transform: trans});

然后，我animate()达到所需的比例（在这种情况下为0.8），如下所示：

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

和完成时，我animate()回原来的带刻度1变换：

transform: trans

动画运行几次后，圈内有一个小规模的结束。 为什么？

编辑：

延迟动画之间比所述动画本身的长度小有意。我的问题是如何使动画工作尽管那。

来源

2017-10-17 Hristiyan Dodov

我改变了反弹和setInterval这样的功能，它运作良好。该setInterval的时间必须大于500毫秒（我用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

来源

2017-10-17 11:19:20 Ashkan

您的主要问题是您的setInterval()中的值太短。在完成之前您正在重新开始动画。

如果不尝试合并两个变换，还可以简化所有操作。将translate()移动到父组，并且事情会变得更简洁。

var snapelem = Snap("svg"); 
 
circ = snapelem.select("#mycirc"); 
 

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

 
    elem.animate({ 
 
     transform: "s" + scale + "," + scale 
 
    }, duration * 0.33, mina.easeout, function() { 
 
     elem.animate({ 
 
      transform: "s1,1" 
 
     }, duration * 0.67, mina.easein); 
 
    }); 
 
}; 
 

 
var count = 0; 
 
setInterval(function() { 
 
    if (++count > 10) return; 
 
    bounce(circ, 0.8, 500); 
 
}, 500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script> 
 

 
<svg height="300px" width="500px"> 
 
    <g transform="translate(40 40)"> 
 
    <circle id="mycirc" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    </g> 
 
</svg>

来源

2017-10-17 11:29:55

我知道我正在重新启动动画完成之前。我在问，尽管如此，我还能如何运作。无论什么时候播放，我都希望它总是以'1'的比例结束。 –

如果你拿我的代码，并将'setInterval'的值改回200，你会看到它的比例为1。 –

嗯，没有注意到。然而，我现场使用的SVG不能被修改，所以我必须在''上进行变换_must_，这样我才能使它以这种方式工作，并且最终以'1'结尾？ I.E.我如何在保留初始转换的同时使其工作？ –

你需要存储的初始转换，否则与同一个对象上的多个动画，他们会感到困惑，（他们将反正）。所以首先，你需要确保动画不重叠。我从其他评论中看到，这是一个示例的一部分，所以暂时搁置一边，但要确保在实时代码中不会发生这种情况:)。

所以，你可以存储转换

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

然后将它传递到FUNC

bounce(circ, 0.8, 500, trans);

而在FUNC，使用...

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

jsfiddle

来源

2017-10-18 14:47:01 Ian

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

回答

相关问题