【问题标题】:re-start animation with start button with burst-engine and canvas使用带有突发引擎和画布的开始按钮重新开始动画
【发布时间】:2012-06-14 14:46:32
【问题描述】:

我用burst引擎和html5创建了一个简单的动画

我想连接开始按钮,这样如果我按下它两次,动画就会重新开始。 现在它才刚刚开始,没有任何事情发生。我知道是因为开始按钮只是给了暂停函数 false 值,但我不知道如何编写函数。

有什么想法吗? 我正在使用 Burst-Engine 库

var dVal = 120, redRectTL, blueRectTL;

function minBurstFunk(Burst) {
    //Bakgrunden
    Burst.timeline("bg", 0, 1, 0, false)
        .shape("ruta", "SVG-ex.svg", "svg", 0, 0)
            .cut("redSqr;blueSqr");

    Burst.timeline("bg").paused = true;
    Burst.timeline("redRect", 0, 20, 0.2, true)
            .shape("red", "SVG-ex.svg", "svg", 0, 0)
                .cut("blueSqr;bgSqr;").track("left")
                    .key(0, 0, "easeInOutQuad")
                    .key(10, -50, "linear")
                    .key(20, 0);


    redRectTL = Burst.timeline("redRect");
    redRectTL.paused = true;

    Burst.start("bg;redRect;blueRect");
}

new Burst('loadCanvas', minBurstFunk);

// ************ buttons ******************

//Stoppa red rectangel
function stopRect1() {
    redRectTL.paused = true;
};

//Starta red rectangel
function klickHant() {
    redRectTL.paused = false;
};

链接到我的动画

http://www.pixeltouch.no/multimedia/labb3/canvas.php

【问题讨论】:

标签: javascript html canvas


【解决方案1】:

我用一个简单的函数解决了这个问题

刚刚将 klickHant() 函数更改为

function klickHant()
    {
    redRectTL.paused = false;
    redRectTL.frame = 0;

    };

【讨论】:

    最近更新 更多