Question

我正在使用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);

Answer 1

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

Answer 2

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

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

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

使用Spritely动画精灵

2 个答案: