javascript - Snap.svg动画stop()不会停止动画

我正在尝试沿着简单的动画进行动画处理，该动画在元素到达窗口边界时停止。这是一些示例代码：

var s = Snap("#bouncy");

var ball = s.circle(100, 100, 10);
var mypath = getLinearPath({x: 300, y: 300}, {x: 300, y: -1000});

var windowBBox = s.getBBox();

function animateAlongPath(path, element, start, dur) {
    var len = Snap.path.getTotalLength(path);
    console.log(element);
    ball.current_anim = Snap.animate(start, len, function (value) {
        var movePoint = Snap.path.getPointAtLength(path, value);
        var ballBounds = element.node.getBoundingClientRect();

        if (Snap.path.isPointInsideBBox(windowBBox, movePoint.x, movePoint.y)) {
            console.log("moving to ", movePoint);
            var t = new Snap.Matrix();
            t.translate(movePoint.x, movePoint.y);
            element.transform(t);
        } else {
            console.log("stopping");
            this.stop();
            element.stop();
            ball.current_anim.stop();
        }
    }, dur);
};

function getLinearPath(start, end) {
    var p;
    p = s.path("M " + start.x + " " + start.y + " L " + end.x + " " + end.y);
    return p
};

animateAlongPath(mypath, ball, 0, 1000);

我只是想在球到达窗框顶部时停止动画。但是，当调用stop（）时（在动画手柄或元素上），我将继续获取回调，直到浏览器冻结为止。

如何取消动画并防止将来发生回调？

最佳答案

我阅读了Snap.svg的源代码，发现anim.stop调用了自己的回调函数。因此，在动画回调中调用stop方法会产生无限循环。

为了解决这个问题，您可以定义一个临时变量来阻止这样的无限循环。

var s = Snap("#bouncy");

var ball = s.circle(100, 100, 10);
var mypath = getLinearPath({x: 300, y: 300}, {x: 300, y: -1000});

var windowBBox = s.getBBox();

function animateAlongPath(path, element, start, dur) {
    var len = Snap.path.getTotalLength(path);
    console.log(element);
    ball.current_anim = Snap.animate(start, len, function (value) {
        var movePoint = Snap.path.getPointAtLength(path, value);
        var ballBounds = element.node.getBoundingClientRect();

        if (Snap.path.isPointInsideBBox(windowBBox, movePoint.x, movePoint.y)) {
            console.log("moving to ", movePoint);
            var t = new Snap.Matrix();
            t.translate(movePoint.x, movePoint.y);
            element.transform(t);
        } else {
            console.log("stopping");
            //this.stop();
            //element.stop();

            //NOTE: ball.current_anim.stop calls ball.current_anim
            var anim = ball.current_anim;
            delete ball.current_anim;
            if(anim){anim.stop();}
        }
    }, dur);
};

function getLinearPath(start, end) {
    var p;
    p = s.path("M " + start.x + " " + start.y + " L " + end.x + " " + end.y);
    return p
};

animateAlongPath(mypath, ball, 0, 1000);