鼠标移出时反向精灵动画答案

【问题标题】：reverse sprite animation on mouseout鼠标移出时反向精灵动画
【发布时间】：2012-11-29 15:00:43
【问题描述】：

我有一个精灵动画，我想在鼠标悬停在对象上时播放它，然后在鼠标离开对象时反向播放并在第一帧停止。

这是我的鼠标进入动画：

$("#banner").mouseenter(function(){ $('#bannerstache').sprite({fps: 200, no_of_frames: 34,   play_frames:34}); });

基本上，当您将鼠标悬停在横幅上时，胡须会“生长”，直到在第 34 帧完成。（而在第 1 帧，没有胡须。）

我希望这个小胡子在鼠标离开悬停状态时反向播放并返回到第 1 帧。

问题是，我尝试了几种反转播放的方法，但它并不总是反转回第一帧。

我怎样才能做到这一点？

非常感谢您能提供一些意见！

【问题讨论】：

如果你能给我提供一个包含示例精灵的小提琴，我可以更好地将我的答案与你的用例结合起来。

标签： jquery reverse mouseenter mouseout spritely

【解决方案1】：

这是我从你的问题描述中总结出来的东西

HTML：

<div id="div1" class="testContainer"></div>

CSS：

.testContainer {height:100px;width:150px;background-color:#CCC;text-align:center;font-size:90px}

JavaScript：

// arrSprite would be an array of images
// each index represents a frame in your sprite
// for the purposes of this test i'll create an array of integers
var arrSprite1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// $div1 is a container within which we'll place our animation
var $div1 = $('#div1');

// create a new SpritePlayer() to handle our animation
var player = new SpritePlayer($div1, arrSprite1, 100);

// set the hover in/out event handler of our container.
$div1.hover(player.forward, player.reverse);

function SpritePlayer($container, arrSprite, speed) {
    var int, cur = 0, min = 0, max = arrSprite.length;

    // give $container the first frame in our sprite (arrSprite)
    $container.html(getFrame(min));

    return {
        forward: function () { playSprite(true); },
        reverse: function () { playSprite(false); }
    };

    function getFrame(i) { return arrSprite[i]; }

    function playSprite(forward) {
        var limit = forward ? max : min;

        clearInterval(int); int = setInterval(function() {
            $container.html(getFrame(forward ? ++cur : --cur));
            cur === limit && clearInterval(int); 
        }, speed);
    }
};

Live Demo

【讨论】：