1

1 つの問題に 2 日間固執した後、最終的に複数のフレームからアニメーションを作成するはるかに簡単な方法を見つけました...それはSpritelyと呼ばれます。

私がこれまでに持っているもの

var play_frames = 23;

$('#door_hov').hover(
    function() {
        $('#door').sprite({
            fps: 24,
            no_of_frames: 23,
            play_frames: play_frames
        });
        play_frames = 22;
    },
    function() {
        $('#door').sprite({
            fps: 24,
            no_of_frames: 23,
            play_frames: 22,
            rewind: true
        });
    }
);​

  • マウスオーバーするとアニメーションが始まります。

  • マウスアウトすると、アニメーションが巻き戻されます。

問題

アニメーションが終了する前にマウスアウトしたり、巻き戻しが終了する前にマウスオーバーしたりすると、行き過ぎて同期が取れなくなります。

私がしたいこと

  • マウスアウト時に、フレーム 1 まで巻き戻し、そこで停止します。
  • マウスオーバーで、最後のフレームまでのみ再生し、そこで停止します。
  • フレーム x で (アニメーション中に) マウスアウトすると、フレーム x からフレーム 1 に巻き戻されます。
  • フレームxで（巻き戻し中に）マウスオーバーすると、フレームxから最後のフレームまで再生したい。

前もって感謝します！

4

1 に答える 1

1

私があなたを正しく理解していれば、あなたはこのようなものが欲しい. 注: を使用すると、コードをさらに短縮できる場合がありますplay_frames。

var iFrames = 23,
    iFps = 24,
    bRewind = false,
    iStartFrame = -1,
    bAnimating = false,
    stopAndRewind = function(oAnim) {
        iStartFrame = ~iStartFrame ? -1 : iFrames - 2;
        bRewind = !bRewind;
        bAnimating = false;
        oAnim.spStop();
    };
$("#door").on("mouseenter mouseleave", function() {
    var iCurFrame = iStartFrame;
    if ($._spritely.instances && $._spritely.instances[$(this).prop("id")])
    {
        if (bAnimating)
        {
            iCurFrame = $(this).spGet("current_frame");
            stopAndRewind($(this));
        }
        $(this).destroy();
    }
    bAnimating = true;
    $(this).sprite({
        fps: iFps,
        no_of_frames: iFrames,
        start_at_frame: iCurFrame,
        rewind: bRewind,
        on_frame: (function() {
            var o = {},
                i = 1;
            if (!bRewind)
            {
                i = iFrames - 2;
            }
            o[i] = stopAndRewind;
            return o;
        })()
    });
});​
于 2012-12-02T17:06:53.963 に答える