Raphael JS - 鼠标悬停时开始/继续动画。鼠标移开时暂停动画

Question

使用Raphael JS，有没有一种方法可以在鼠标悬停期间使圆圈向右（或任何方向）移动，然后当光标不再位于圆圈上时暂停/停止移动。

我尝试了几种不同的方法，但它们都有错误。主要问题之一是：如果鼠标光标进入圆圈后没有移动，那么一旦圆圈移动到鼠标光标不再位于圆圈顶部的位置，就不会触发“mouseout”。

您将在这些不同的尝试中明白我的意思：

1）带有暂停/恢复的动画：

jsfiddle.net/fKKNt/

• 但是动画是不稳定且不可靠的。如果将鼠标悬停在对象上，当对象移出鼠标光标所在位置时，它不会触发“鼠标移开”侦听器。

2）通过鼠标悬停和重新定位.attr("cx"):

jsfiddle.net/c4BFt/

• 但我们希望动画在光标位于圆圈中时继续。

3）使用setInterval（如建议： “if mouseover”或“do while” JavaScript/jQuery 中的 mouseover"):

jsfiddle.net/9bBcm/

• 但是，当圆圈移动到光标所在位置之外时，不会调用“mouseout”。即圆圈移动到应该调用“mouseout”的位置，但它没有被调用。 “悬停”也会发生同样的事情：

jsfiddle.net/STruB/

Answer 1

我确信有一种更优雅的方法可以做到这一点，但在我的脑海中，你可以尝试这样的事情： http://jsfiddle.net/D6Ps4/2/

如果由于某种原因消失，我添加了下面的代码。该解决方案只需启动动画，然后检查鼠标光标（注意 e.offsetX/e.offsetY）是否位于 Raphael 对象的边界框内（Element.getBBox()) 以某个设定的时间间隔。如果是，则不执行任何操作，并使用 setTimeout 再次检查一段时间，如果不是，则暂停动画。

    var paper = Raphael("holder");
    var animObject = Raphael.animation({cx: 400}, 5000);
    circle = paper.circle(90, 90, 45).attr({fill: "#0E4"});
    var timer;

    circle.mouseover(function(e) {
        var anim = function(shouldAnim) {
            if (shouldAnim) {
                circle.animate(animObject);
            }
            if (!mouseInsideCircle(e, circle)) {
                circle.pause();
                return;            
            } else {
                timer = setTimeout(function() {anim(false)}, 20);
            }
        }
        anim(true);
    });

    circle.mouseout(function() {
        this.pause();
        clearTimeout(timer);
    });

    var mouseInsideCircle = function(e, c) {
        var bb = c.getBBox();
        if (e.offsetX > bb.x && e.offsetY > bb.y) {
            return true;
        }
        return false;
    }

我确信该解决方案是有缺陷的（它检查的是boundBox，而不是圆本身；它还假设圆正在向右移动）并且可能并不理想，但它似乎工作得相当顺利，并希望让您走上正确的道路。