我正在使用Spritely为精灵设置动画。我已经成功平移，但我的最后一项工作是创建淡入淡出的“明星”。我创建了一个精灵表：
我按照此处找到的文档更改了帧数和每秒帧数。
$('#star').sprite({fps: 24, no_of_frames: 12});
我的问题是精灵的动画既生涩又似乎没有跟随精灵图像，它应该淡入然后淡出。目前它在半可见和完全可见之间摇摆不定。
我使用 Chrome 的控制台来记录帧，我似乎只得到帧 0,1 和 2。我原本预计会有 12 帧（精灵中的每个图像一个），但我是新手，所以我可能会弄错。根据日志，它似乎也没有到达最后一帧。
这是我的完整代码：
(function($) {
$(document).ready(function() {
$('.purplestar').sprite({
fps: 24,
no_of_frames: 12,
start_at_frame: 0,
on_first_frame: function(obj) {
if (window.console) {
console.log('first frame');
}
},
on_last_frame: function(obj) {
if (window.console) {
console.log('last frame');
}
},
on_frame: {
2: function(obj) {
if (window.console) {
console.log('frame 2');
}
},
1: function(obj) {
if (window.console) {
console.log('frame 1');
}
},
0: function(obj) {
if (window.console) {
console.log('frame 0');
}
},
3: function(obj) {
if (window.console) {
console.log('frame 3');
}
}
}
});
$('#balloonleft').pan({fps: 30, speed: 4, dir: 'up', depth: 70});
$('#balloonright').pan({fps: 30, speed: 3, dir: 'up', depth: 70});
$('#bird')
.sprite({
fps: 9,
no_of_frames: 3,
// the following are optional: new in version 0.6...
start_at_frame: 2
})
.spRandom({top: 50, bottom: 200, left: 300, right: 320})
.activeOnClick()
.active();
});
})(jQuery);