带有 Spritely 的 jQuery 精灵答案

【问题标题】：jQuery Sprites with Spritely带有 Spritely 的 jQuery 精灵
【发布时间】：2012-12-02 12:01:42
【问题描述】：

在被一个问题困扰了 2 天之后，我终于找到了一种更简单的方法来制作多帧动画……它被称为 Spritely。

What I have so far

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 帧播放到最后一帧。

提前致谢！

【问题讨论】：

标签： javascript jquery css animation spritely

【解决方案1】：

如果我的理解正确，那么你想要this 之类的东西。注意：在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;
        })()
    });
});

【讨论】：