我正在使用Spritely动画精灵。我成功地成功了,但我最后的工作是创造淡入淡出的“明星”。我创建了一个精灵表:
我按照文档here进行了操作,并更改了帧数和每秒帧数。
$('#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);
答案 0 :(得分:1)
我知道这不能回答你的问题,但是我不会用精灵来动画这个特殊的精灵;除了不透明度之外,精灵的图像不会改变,所以只需使用像fadeToggle这样的标准jQuery库的一部分来改变对象的不透明度,你就可以获得更平滑的效果。
答案 1 :(得分:0)
首先要感谢Rohaq的答案,它确实提供了一种替代方法,但它没有直接回答我的问题,我设法弄清楚了。
Spritely有效地更改background-position
上的div
属性。我发现我的问题是因为有一个宽度的精灵,当除以帧数时没有产生整数。当我改变精灵的宽度以使宽度为1200px而在12帧时,这意味着每帧都是100px。在我有57.5px之前,它没有用。
生涩的性质是我自己做的,因为其中一个框架的精灵比左边的精灵1px。