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

Raphael JS - Start/Continue animating during mouseover. Pause animation on mouseout

本文关键字：动画 鼠标 JS 离开 暂停 继续 悬停 Raphael 开始      更新时间：2023-09-26

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

我尝试了几种不同的方法，但是它们都有bug。其中一个主要问题是:如果鼠标光标在进入圆圈后没有移动，那么一旦圆圈移动到鼠标光标不再位于圆圈上方的位置，"mouseout"将不会被触发。

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

1)动画与暂停/恢复:

jsfiddle.net/fKKNt/

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

2)鼠标移到&.attr (cx):

jsfiddle.net/c4BFt/

  • 但是我们希望动画在光标在圆圈内的时候也能继续。

3)使用setInterval(建议如下:"如果鼠标悬停";或者"鼠标悬停时执行";在JavaScript/jQuery):

jsfiddle.net/9bBcm/

  • 但是当圆圈移动到光标所在的位置之外时，不会调用"mouseout"。例如，圆圈移动到应该调用"mouseout"的位置，但没有调用它。"hover"也是如此:

jsfiddle.net/STruB/

我相信有一种更优雅的方法可以做到这一点，但是我想，你可以尝试这样做:http://jsfiddle.net/D6Ps4/2/

如果由于某种原因消失了，我包含了下面的代码。解决方案只是启动动画，然后检查鼠标光标(注意e.offsetX/e.offsetY)是否在某个设定的间隔内位于Raphael Object (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，而不是圆圈本身;它还假设圆是向右移动的)，也许不是理想的，但它似乎工作得相当顺利，希望能让您走上正确的道路。

相关文章：