Question

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

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

你会在这些不同的尝试中看到我的意思：

1）暂停/恢复动画：

jsfiddle.net/fKKNt /

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

2）使用鼠标悬停重新定位＆amp; .attr（ “CX”）：

jsfiddle.net/c4BFt /

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

3）使用setInterval（如下所示： An "if mouseover" or a "do while mouseover" in JavaScript/jQuery）：

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，而不是圆圈本身;它还假设圆圈向右移动）并且可能并不理想，但它似乎工作得相当顺利，希望能让你在右边路径。

Raphael JS - 在鼠标悬停期间开始/继续制作动画。在mouseout上暂停动画

1 个答案: