Raphael JS - マウスオーバー中にアニメーションを開始/継続します。マウス出力時にアニメーションを一時停止する

Raphael JSを使用すると、マウスオーバー時に円を右(または任意の方向)に移動させ、カーソルが円上になくなったときに移動を一時停止/停止する方法があります。

私はいくつかの方法を試みましたが、バグがあります。主な問題の1つは、円に入った後にマウスカーソルが動かない場合、マウスカーソルがもはや円の上にならない位置に円が移動すると、「mouseout」がトリガーされないことです。

これらの異なる試みで私が何を意味するのかが分かります:

1)一時停止/再開をアニメーション化する:

jsfiddle.net/fKKNt/

  • しかし、アニメーションは不気味で信頼性がありません。オブジェクト上にマウスカーソルを置くと、オブジェクトがマウスカーソルの外側に移動するため、オブジェクトは「マウスアウト」リスナーをトリガーしません。

2) Repositioning with mouseover & .attr("cx"):

jsfiddle.net/c4BFt/

  • しかし、カーソルが円内にある間もアニメーションを継続したいとします。

3)setIntervalを使う( 「マウスオーバーの場合」または「do while JavaScript/jQueryのmouseover "):

jsfiddle.net/9bBcm/

  • しかし、カーソルがある場所の外に円が移動するので、「マウスアウト」は呼び出されません。私。円は「mouseout」が呼び出されるべき場所に移動しますが、呼び出されません。 "ホバー"と同じことが起こります:

jsfiddle.net/STruB/

2

1 答え

I'm sure there's a much more elegant way to do this, but off the top of my head, you could try something like this: http://jsfiddle.net/D6Ps4/2/

なんらかの理由で消える場合は、以下のコードを追加しました。このソリューションは単にアニメーションを開始し、マウスカーソル(e.offsetX/e.offsetYに注意)がラファエルオブジェクトの境界ボックス内にあるかどうかを確認します( 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;
    }

解決策に欠陥があると確信しています(サークル自体ではなく、バウンドボックスをチェックしています;円は右に動いていると仮定しています)。おそらく理想的ではありませんが、合理的にスムーズに動作するように思われます。

1
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript