Raphael JS - 在鼠标悬停期间开始/继续动画。鼠标悬停时暂停动画答案

【问题标题】：Raphael JS - Start/Continue animating during mouseover. Pause animation on mouseoutRaphael JS - 在鼠标悬停期间开始/继续动画。鼠标悬停时暂停动画
【发布时间】：2012-01-23 06:19:45
【问题描述】：

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

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

你会在这些不同的尝试中明白我的意思：

1) 暂停/恢复动画：

jsfiddle.net/fKKNt/

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

2) 使用 mouseover & .attr("cx") 重新定位：

jsfiddle.net/c4BFt/

但我们也希望光标在圆圈中时动画继续播放。

3) 使用 setInterval（建议如下： An "if mouseover" or a "do while mouseover" in JavaScript/jQuery):

jsfiddle.net/9bBcm/

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

jsfiddle.net/STruB/

【问题讨论】：

标签： javascript animation raphael mouseover mouseout

【解决方案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，而不是圆圈本身；它还假设圆圈向右移动）并且可能不理想，但它似乎运行得相当顺利，希望能让您正确路径。

【讨论】：