Raphael JS - запуск / продолжение анимации при наведении мыши. Приостановить анимацию при наведении мыши

Question

Используя Raphael JS, есть ли способ сделать круг движущимся вправо (или в любом направлении) во время наведения мыши, а затем приостановить / остановить движение, когда курсор больше не находится на круге.

Я пробовал несколько разных методов, но у них есть ошибки. Одна из основных проблем заключается в следующем: если курсор мыши не перемещается после входа в круг, «mouseout» не будет срабатывать, когда круг перемещается в место, где курсор мыши больше не находится над верхней частью круга.

Вы поймете, что я имею в виду в этих разных попытках:

1) Анимировать с паузой / резюме:

jsfiddle.net / fKKNt /

• Но анимация прерывистая и ненадежная. Если вы наведите курсор мыши на объект, так как объект перемещается за пределы того места, где находится курсор мыши, он не вызывает слушателя "mouseout".

2) Позиционирование с наведением мыши и .attr ("cx"):

jsfiddle.net / c4BFt /

• Но мы хотим, чтобы анимация продолжалась, пока курсор тоже находится в круге.

3) Использование setInterval (как предложено в: "if mouseover" или "do while mouseover" в 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;
    }

Я уверен, что решение некорректно (оно проверяет связанный ящик, а не сам круг; оно также предполагает, что круг движется вправо) и, возможно, не идеально, но кажется, что оно работает достаточно плавно и, надеюсь, дает вам право путь.