我有一个精灵动画,我想在鼠标悬停在物体上方时播放,然后反向播放并在鼠标离开物体时停在第一帧上。
这就是我用鼠标输入动画的原因:
$("#banner").mouseenter(function(){ $('#bannerstache').sprite({fps: 200, no_of_frames: 34, play_frames:34}); });
基本上,当你将鼠标悬停在横幅上时,胡须会“增长”直到它在第34帧完成。(而在第1帧,没有胡子。)
我希望这个小胡子反向播放,并在鼠标离开悬停状态时返回第1帧。
问题是,我尝试了一些反转播放的方法,但它并不总是反向回到第一帧。
我怎样才能做到这一点?
如果你能提供一些意见,那么非常感谢你!
答案 0 :(得分:2)
这是我从你的问题描述中掀起的东西
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);
}
};