Question

我有个圈子。我想创建一个函数，将其从1比例设置为0.8并返回1.我目前有什么工作，但是当我连续几次调用它时几乎没有延迟，动画会发生冲突，并且圆圈会以不同的方式结束（较小的）规模。

在完成所有缩放操作时，我希望圆圈保持在其位置。此外，我希望通过圆心的锚点完成缩放。目前情况如此。

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

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

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

修改

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

Answer 1

您的主要问题是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>

Answer 2

我改变了这样的反弹和setInterval函数，并且效果很好。 setInterval时间必须大于500ms（我使用了550ms），并且在animate函数的回调中你不应该再次使用scale（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

Answer 3

你需要存储初始转换，否则在同一个对象上有多个动画，它们会混淆（无论如何它们都会）。首先，您需要确保动画不重叠。我从其他评论中看到，这是一个例子的一部分，所以暂时把它放在一边，但要确保在实时代码中没有发生:)。

所以你可以存储转换

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

然后将其传递给func

bounce(circ, 0.8, 500, trans);

在函数中，使用...

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

jsfiddle

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

3 个答案: