使用Spritely动画精灵

时间:2012-10-25 16:06:13

标签: jquery html sprite spritely

我正在使用Spritely动画精灵。我成功地成功了,但我最后的工作是创造淡入淡出的“明星”。我创建了一个精灵表:

sprites

我按照文档here进行了操作,并更改了帧数和每秒帧数。

$('#star').sprite({fps: 24, no_of_frames: 12});

我的问题是精灵的动画既不生涩又似乎不遵循精灵图像,精灵图像应该淡入然后淡出。目前它在半可见和完全之间徘徊。

我使用Chrome的控制台记录帧,我似乎只得到帧0,1和2.我本来期望12帧(精灵中每个图像一个)但我是新手,所以我可能会弄错。根据日志,它似乎没有到达最后一帧。

enter image description here

以下是我的完整代码:

(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);

2 个答案:

答案 0 :(得分:1)

我知道这不能回答你的问题,但是我不会用精灵来动画这个特殊的精灵;除了不透明度之外,精灵的图像不会改变,所以只需使用像fadeToggle这样的标准jQuery库的一部分来改变对象的不透明度,你就可以获得更平滑的效果。

答案 1 :(得分:0)

首先要感谢Rohaq的答案,它确实提供了一种替代方法,但它没有直接回答我的问题,我设法弄清楚了。

Spritely有效地更改background-position上的div属性。我发现我的问题是因为有一个宽度的精灵,当除以帧数时没有产生整数。当我改变精灵的宽度以使宽度为1200px而在12帧时,这意味着每帧都是100px。在我有57.5px之前,它没有用。

生涩的性质是我自己做的,因为其中一个框架的精灵比左边的精灵1px。