在一个问题上纠结了整整 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 帧播放到最后一帧。
提前致谢!
最佳答案
如果我没理解错,那么你想要类似 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;
})()
});
});
关于javascript - 带有 Spritely 的 jQuery Sprite ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13669089/