Question

以下是该方案：我正在创建一个信息图表交互式动画，允许用户虚拟设置三脚架，与虚拟相机交互等。当箭头指向用户应点击的位置时，我需要时间轴停止。然后，在点击三脚架（电影剪辑）时，时间线应继续播放（三脚架也会动画，然后视图会切换到第一人称照相机）。目前，动画只是永远播放，不会停止任何允许用户交互。到目前为止，这是我的createJS代码：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CreateJS export from birdsofprey-anim9c</title>

    <script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
    <script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
    <script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
    <script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
    <script src="birdsofprey-anim9c.js"></script>

    <script>
    var canvas, stage, exportRoot;

    function init() {
        canvas = document.getElementById("canvas");
        images = images||{};

        var manifest = [
            {src:"images/Bitmap1.png", id:"Bitmap1"},
            {src:"images/Bitmap2.png", id:"Bitmap2"},
            {src:"images/Scene_1.jpg", id:"Scene_1"}
        ];

        var loader = new createjs.LoadQueue(false);
        loader.addEventListener("fileload", handleFileLoad);
        loader.addEventListener("complete", handleComplete);
        loader.loadManifest(manifest);
    }

    function handleFileLoad(evt) {
        if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
    }

    function handleComplete() {
        exportRoot = new lib.birdsofpreyanim11a();

        stage = new createjs.Stage(canvas);
        stage.addChild(exportRoot);
        tripodleg = new lib.LEFT_LEG_MC;
        stage.addChild(tripodleg);
        stage.update();

        createjs.Ticker.setFPS(24);
        createjs.Ticker.addEventListener("tick",f);
        function f(e){
        //var t=this;
        //t.stop();
        //exportRoot.stop();
        var delay = 4000;
        var startTime=createjs.Ticker.getTime();
        createjs.Ticker.getMeasuredFPS();
        if(createjs.Ticker.getMeasuredFPS == 6){
           exportRoot.stop();
           tripodleg.onclick = function(){
               exportRoot.gotoAndPlay(90);
           }
           //exportRoot.gotoAndPlay(90);
            createjs.Ticker.removeEventListener("tick",f);
            }
        }
        createjs.Ticker.addEventListener("tick", stage);
    }

    </script>
    </head>

    <body onload="init();" style="background-color:#D4D4D4">
        <canvas id="canvas" width="550" height="540" style="background-
    color:#ffffff"></canvas>
    </body>
    </html>

提前感谢StackOverflow以及他们所关联的超级编码员的专业知识！ -qs [编辑] 此次更新了我的代码，这次通过 addChild（）; 将我的三脚架MovieClip的实例添加到舞台，并通过 exportRoot.stop停止时间轴（）; exportRoot没有停止，任何线索？提前谢谢。

Answer 1

我猜你在谈论这条线：

function handlClick(){
    mc.play(2);
}

如果是，请使用gotoAndPlay(2)代替play。 EaselJS最初基于ActionScript语言，因此它反映了许多功能。查看MovieClip docs。

function handlClick(){
    mc.gotoAndPlay(2);
}

有一点需要注意：createjs.Ticker.tick方法中的handlTick是什么？没有tick属性，只有“tick”事件。这个if语句永远不会是true。你准备用这个代码做什么？您是否正在寻找主剪辑到达第30帧时添加的点击处理程序？或者在30“滴答”之后？无论哪种方式，这都无能为力。

希望有所帮助。

[基于更新的编辑]

看起来您将其更改为使用gotoAndPlay，但存在一些问题：

您正在调用全局gotoAndPlay函数（不存在），而不是以MovieClip实例为目标。如果您的主时间轴包含您要转到的框架，请使用exportRoot.gotoAndPlay(90);。

接下来，您正在呼叫this.stop()。您的事件监听器是匿名的（很好），但这意味着this是Window。同样，没有全局stop方法 - 因此您应该在要停止的时间轴上调用它。在这种情况下，它可能是exportRoot.stop()。

干杯，

如何将createJS等效于gotoAndPlay（）和stop（）

1 个答案: