Javascript 带有sprite的jQuery精灵

在一个问题上纠缠了整整两天之后，我终于找到了一种更简单的方法，可以从多个帧制作动画。。。它叫

• 鼠标悬停时，它将启动动画

• 鼠标移出时，它将回放动画

问题 如果在动画结束之前将鼠标移出，或在回放结束之前将鼠标移到上方，则会导致鼠标移动过远并失去同步

我想做什么

• 在mouseout上，仅倒带到第1帧并停止
• 在鼠标悬停时，只播放到最后一帧，然后停止播放
• 如果我（在动画过程中）在第x帧处鼠标移出，我希望它从第x帧倒回第1帧
• 如果我将鼠标移到第x帧（在回放期间），我希望它从第x帧播放到最后一帧

---

提前谢谢

如果我对你的理解正确，那么你想要的是类似的东西。注意：在

play\u 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;
        })()
    });
});​

---

如果我对你的理解是正确的，那么你就会想要类似的东西。注意：在

play\u 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;
        })()
    });
});​