如何在两个动画画布元素之间进行通信？

Question

我想在两个动画画布元素之间进行通信。

我用Adobe Animate CC制作了两个html5 canvas js动画。 我把这两个元素放在一个html页面中。 我可以在这些动画中成功调用函数 - 在下面的代码中成功触发警报。

我想调用一个动画中的函数来控制另一个动画。 我需要帮助知道如何正确调用/命名/寻址动画。 到目前为止，我没有得到canvas_ship.gotoAndPlay(12);的canvas_ship.gotoAndPlay(12); 和canvas_car.gotoAndPlay(7); ，我花了几个小时尝试不同的参考。 我不是一个大编码器，但我确信这是一件简单的事情。 任何帮助表示赞赏！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Canvas Animations Talking to Each Other</title>


<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="ship.js"></script>
<script src="car.js"></script>

<script>
function init () {

    var canvas, stage, exportRoot;

    canvas = document.getElementById("canvas_ship");
    exportRoot = new libs_ship.ship();

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

    createjs.Ticker.setFPS(libs_ship.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);


    canvas = document.getElementById("canvas_car");
    exportRoot = new libs_car.car();

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

    createjs.Ticker.setFPS(libs_car.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}

function tell_Ship_what_frame_to_go_to(){
    alert("tell_Ship_what_frame_to_go_to was triggered");
    canvas_ship.gotoAndPlay(12);  //This line does not work.
}
function tell_Car_what_frame_to_go_to(){
    alert("tell_Car_what_frame_to_go_to was triggered");
    canvas_car.gotoAndPlay(7);  //This line does not work.
}


</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
    <canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
    <canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>

Answer 1

我已经收到了帮助，现在将分享答案。 别客气。 只是邀请我去吃晚餐。

在Adobe Animate中，您需要将库命名空间（在我认为的“高级”选项卡中的“发布”设置中）更改为lib_jerry或您提出的任何自定义名称...只要它与其他动画不同即可。 然后按照此代码中的设置进行操作。 您可以在Animate动画中调用这些函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Container</title>

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="tommy.js"></script>
<script src="jerry.js"></script>
<script>

var canvas, stage, tomtom, jerjer;
function init() {

    var exportRoot;

    //Tommy
    canvas = document.getElementById("canvas_tommy");

    tomtom = new lib_tommy.tommy();
    stage = new createjs.Stage(canvas);
    stage.addChild(tomtom);
    stage.update();

    createjs.Ticker.setFPS(lib_tommy.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);


    //Jerry
    canvas = document.getElementById("canvas_jerry");

    jerjer = new lib_jerry.jerry();

    stage = new createjs.Stage(canvas);
    stage.addChild(jerjer);
    stage.update();

    createjs.Ticker.setFPS(lib_jerry.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);

}

function button_from_tommy_was_clicked(){   
    tomtom.gotoAndPlay(5);
}

function button_from_jerry_was_clicked(){   
    jerjer.gotoAndPlay(5);
}

</script>

</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
    <canvas id="canvas_tommy" width="970" height="90" style="background-color:#727272"></canvas>
    <canvas id="canvas_jerry" width="970" height="90" style="background-color:#727272"></canvas>
</body>
</html>

如何在两个动画画布元素之间进行通信？

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-05-03 13:18:07

如何在两个动画画布元素之间进行通信？

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-05-03 13:18:07

解决方案1
1 已采纳 2016-05-03 13:18:07