使用 Spritely 动画精灵答案

【问题标题】：Animating sprite using Spritely使用 Spritely 动画精灵
【发布时间】：2012-10-25 16:06:13
【问题描述】：

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

【问题讨论】：

标签： jquery html sprite spritely

【解决方案1】：

我知道这并不能回答您的问题，但我不会使用 spritely 来为这个特定的 sprite 设置动画；除了不透明度之外，您的精灵图像不会改变，因此您只需使用 fadeToggle 之类的东西（它是标准 jQuery 库的一部分）改变对象的不透明度，就可以获得更平滑的效果。

【讨论】：

【解决方案2】：

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

Sprite 有效地更改了 div 上的 background-position 属性。我发现我的问题是由于精灵的宽度除以帧数时没有产生整数。当我更改精灵的宽度时，宽度为 1200 像素，在 12 帧时，这意味着每帧为 100 像素。在我有 57.5px 之前，这是行不通的。

生涩的本质是我自己做的，因为其中一帧的精灵比其他帧向左 1px。

【讨论】：