首页 文章

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

提问于
浏览 次
2

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

我尝试了几种不同的方法，但它们有bug . 其中一个主要问题是：如果鼠标光标在进入圆圈后没有移动，一旦圆圈移动到鼠标光标不再位于圆圈顶部的位置，就不会触发“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" . 即圆圈移动到应该调用"mouseout"的位置，但不会调用它 . "hover"也发生了同样的事情：

jsfiddle.net/STruB/

javascript animation raphael mouseover mouseout

1 回答

  • 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，而不是圆圈本身;它也假设圆圈向右移动）并且可能不理想，但它似乎工作得相当顺利，希望能让你走上正确的道路 .

    回复于

相关问题