如何在两个动画画布元素之间进行通信?
Posted
技术标签:
【中文标题】如何在两个动画画布元素之间进行通信?【英文标题】:How to Communicate between Two Animated Canvas Elements? 【发布时间】:2016-08-20 12:01:53 【问题描述】:我想在两个动画画布元素之间进行通信。
我用 Adobe Animate CC 制作了两个 html5 canvas js 动画。我已经将这两个元素放在一个 html 页面中。我可以从这些动画中成功调用函数——警报在下面的代码中成功触发。
我想从一个动画中调用函数来控制另一个动画。我需要知道如何正确调用/命名/寻址动画的帮助。到目前为止,我没有收到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" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas_car" style="background-color:#FFFFFF"></canvas>
</body>
</html>
【问题讨论】:
***.com/questions/36856273/… 【参考方案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" style="background-color:#727272"></canvas>
<canvas id="canvas_jerry" style="background-color:#727272"></canvas>
</body>
</html>
【讨论】:
以上是关于如何在两个动画画布元素之间进行通信?的主要内容,如果未能解决你的问题,请参考以下文章
Vue/CSS,如何在两个交替元素之间进行平滑的高度过渡(包括小提琴)