精灵回调函数

Question

我有一个 Spritely 运行的实现，其中后一半的帧需要在所有帧的第一次播放后无限循环。这可以通过回调来完成吗？ - 我查看了“on_frame:”，但这似乎没有作为函数运行。

Answer 1

on_frame 是一个对象，您可以在其中指定运行函数的框架。例如（摘自文档，http://spritely.net/documentation/），

on_frame: { // note - on_frame is an object not a function
        8: function(obj) { // called on frame 8
            obj.spState(2); // change to state 2 (row 2) on frame 8
        },
        16: function(obj) { // called on frame 16
            obj.spState(3); // change to state 3 (row 3) on frame 16
        }
    }

还有on_last_frame，它是一个回调函数。所以你可以做的是创建两个动画。第一个可能包含所有帧，而第二个可能只有一半，你需要永远循环。您可以通过在上面的函数中调用精灵上的spStop() 来停止第一个动画并启动新的精灵动画。或者简单地使用属性play_frames 指定第一个动画将运行固定数量的动画。

EDIT1 - 示例

这是一个基于 spritely 示例代码的工作示例(http://spritely.net/downloads/spritely-0.6-sample-code.zip)

http://jsfiddle.net/58QpY/

第一个动画将运行 20 帧然后停止，与另一个元素相关的第二个动画将开始。

html

<div id="container">
    <div id="stage" class="stage">
        <div id="tap" class="stage"></div>
        <div id="bg" class="stage"></div>
        <div id="clouds" class="stage"></div>
        <div id="hill2" class="stage"></div>
        <div id="hill1" class="stage"></div>
        <div id="balloons" class="stage"></div>
        <div id="logo">Spritely</div>
    </div>
    <div id="bird"></div>
    <div id="bird2"></div>
</div>

js

$(document).ready(function () {

    var anim1_frames = 20;
    var current_frame = 0;

    $('#bird').sprite({
        fps: 9,
        no_of_frames: 3,
        on_last_frame: function (obj) {
            current_frame += 3;
            if (current_frame > anim1_frames) {
                alert("First animation will stop. Second animation will start, of #bird2 element, which uses two frames and moves slowly. This could be a different sprite.");

                obj.spStop();
                $('#bird').hide();
                $('#bird2').show().sprite({
                    fps: 1,
                    no_of_frames: 2,
                    start_at_frame: 2
                });
            }
        }
    });

    $('#hill2').pan({
        fps: 30,
        speed: 2,
        dir: 'left',
        depth: 30
    });
    $('#hill1').pan({
        fps: 30,
        speed: 3,
        dir: 'left',
        depth: 70
    });

});

css

#stage {
    top: 0px;
    left: 0px;
    z-index: 100;
}
.stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 900px;
    height: 359px;
    overflow: hidden;
}
#bg {
    background: #aedfe5 url(http://spritely.net/images/sky1.png) 0 0 repeat-x;
}
#clouds {
    background: transparent url(http://spritely.net/images/cloud.png) 305px 102px repeat-x;
}
#hill2 {
    background: transparent url(http://spritely.net/images/hill2.png) 0 258px repeat-x;
}
#hill1 {
    background: transparent url(http://spritely.net/images/hill-with-windmill.png) 0 104px repeat-x;
}
#balloons {
    position: relative;
    left: 720px;
    background: transparent url(http://spritely.net/images/balloons.png) 0 0 repeat-y;
}
#bird, #bird2 {
    background: transparent url(http://spritely.net/images/bird-forward-back.png) 0 0 no-repeat;
    position: absolute;
    top: 150px;
    left: 65px;
    width: 180px;
    height: 123px;
    z-index: 2000;
    cursor: pointer;
}
#bird2 {
    display:none;
}

如果只需要使用一个动画，您也可以在on_last_frame 中使用函数obj.goToFrame，但要注意逻辑。

EDIT2 - 对 cme​​ts 的反馈

我隔离了您演示的精灵部分，删除了所有 css3 并对其进行了一些修改，以便专注于如何使精灵在您的情况下工作。

http://jsfiddle.net/mguWf/

js

$(document).ready(function () {

    var anim1_frames_state1 = 75;
    var anim1_frames_state2 = 47;
    $('.anim').sprite({
        fps: 40,
        no_of_frames: anim1_frames_state1,
        on_last_frame: function (obj) {
            obj.spStop();
            $('.anim').destroy();
            $('.anim').hide();
            $('.anim-old-2').show().sprite({
                fps: 100,
                no_of_frames: anim1_frames_state2
            }).spState(2).fps(15);
        }
    });
});

html

<div class="anim"></div>
<div class="anim-old"></div>
<div class="anim-old-2"></div>

css

.anim {
    background-size: 20850px 454px;
}
.anim, .anim-old, .anim-old-2 {
    width: 278px;
    height: 227px;
    background: url("http://merlin.wecreatedigit.al/new-anim2.png") no-repeat;
    display: block;
    float: left;
    position: relative;
}
.anim-old, .anim-old-2 {
    display: none;
}

您使用的图像有两行。为了使用另一行的帧，需要通过spState() 函数设置state。要使其工作，需要允许第一个动画使用第一行/状态的所有帧，然后切换到第二个动画并使其使用第二行/状态的帧。所以这就像有两个图像，第一行和第二行，分别分配给两个动画，让第二个动画不间断地运行。