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;
}

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

EDIT2 - 对评论的反馈

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

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;
}

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

精灵回调函数

1 个答案: