如何两部动画画布元素之间的沟通？ [英] How to Communicate between Two Animated Canvas Elements?
问题描述
我想两部动画画布元素之间的通信。
我已经做了两个HTML5画布JS动画与Adobe动画CC。我已经把两个元素到一个HTML页面。我可以成功地调用函数从这些动画中 - 警报在以下code成功触发
我想从一个动画调用函数来控制其他动画。我需要帮助了解如何正确地调用/名称/地址的动画。到目前为止，我得到的 canvas_ship.gotoAndPlay（12）无反应; 和 canvas_car.gotoAndPlay（7）; ，我已经花了几个小时尝试不同的引用。我不是一个大codeR，但我敢肯定，这是一个简单的事情。任何帮助AP preciated！
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;多画布动画相互交谈＆LT; /标题＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.createjs.com/easeljs-0.8.1.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.createjs.com/tweenjs-0.6.1.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.createjs.com/movieclip-0.8.1.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =ship.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =car.js＆GT;＆下; /脚本＆GT;＆LT;脚本＆GT;
功能的init（）{ VAR帆布，舞台，exportRoot; 画布=的document.getElementById（canvas_ship）;
exportRoot =新libs_ship.ship（）; 舞台=新createjs.Stage（画布）;
stage.addChild（exportRoot）;
stage.update（）; createjs.Ticker.setFPS（libs_ship.properties.fps）;
createjs.Ticker.addEventListener（嘀，舞台）;
画布=的document.getElementById（canvas_car）;
exportRoot =新libs_car.car（）; 舞台=新createjs.Stage（画布）;
stage.addChild（exportRoot）;
stage.update（）; createjs.Ticker.setFPS（libs_car.properties.fps）;
createjs.Ticker.addEventListener（嘀，舞台）;
}功能tell_Ship_what_frame_to_go_to（）{
警报（tell_Ship_what_frame_to_go_to被触发）;
canvas_ship.gotoAndPlay（12）; //此行不起作用。
}
功能tell_Car_what_frame_to_go_to（）{
警报（tell_Car_what_frame_to_go_to被触发）;
canvas_car.gotoAndPlay（7）; //此行不起作用。
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;＆LT;身体的onload =的init（）;风格=背景色：＃D4D4D4＆GT;
＆LT;帆布ID =canvas_shipWIDTH =300HEIGHT =250的风格=背景颜色：#FFFFFF＆GT;＆LT; /帆布＆GT;
＆LT;帆布ID =canvas_carWIDTH =300HEIGHT =250的风格=背景颜色：#FFFFFF＆GT;＆LT; /帆布＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我收到的帮助，现在将共享答案。不用谢。只是请我过来吃饭一段时间。
在Adobe动画，你需要更改库命名空间（在发布设置中的高级选项卡，我认为），以lib_jerry或者你拿出...只要它比其他动画不同的任何自定义名称。然后，只需按照此code中的设置。您可以从动画动画中调用的函数。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;集装箱＆LT; /标题＆GT;＆LT;脚本SRC =HTTPS：//$c$c.createjs.com/createjs-2015.11.26.min.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =tommy.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =jerry.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;VAR帆布，舞台，TomTom公司，jerjer;
功能的init（）{ VAR exportRoot; //汤米
画布=的document.getElementById（canvas_tommy）; TomTom公司=新lib_tommy.tommy（）;
舞台=新createjs.Stage（画布）;
stage.addChild（手鼓）;
stage.update（）; createjs.Ticker.setFPS（lib_tommy.properties.fps）;
createjs.Ticker.addEventListener（嘀，舞台）;
//杰里
画布=的document.getElementById（canvas_jerry）; jerjer =新lib_jerry.jerry（）; 舞台=新createjs.Stage（画布）;
stage.addChild（jerjer）;
stage.update（）; createjs.Ticker.setFPS（lib_jerry.properties.fps）;
createjs.Ticker.addEventListener（嘀，舞台）;}功能button_from_tommy_was_clicked（）{
tomtom.gotoAndPlay（5）;
}功能button_from_jerry_was_clicked（）{
jerjer.gotoAndPlay（5）;
}＆LT; / SCRIPT＆GT;＆LT; /头＆GT;
＆LT;身体的onload =的init（）;风格=背景色：＃D4D4D4;保证金：0像素;＆GT;
＆LT;帆布ID =canvas_tommyWIDTH =970HEIGHT =90的风格=背景颜色：＃727272＆GT;＆LT; /帆布＆GT;
＆LT;帆布ID =canvas_jerryWIDTH =970HEIGHT =90的风格=背景颜色：＃727272＆GT;＆LT; /帆布＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
I want to communicate between two animated canvas elements.
I’ve made two html5 canvas js animations with Adobe Animate CC. I’ve put both of these elements into one html page. I can successfully call functions from within those animations – the alerts are triggered successfully in the code below.
I want to call functions from one animation to control the other animation. I need help knowing how to correctly call/name/address the animations. So far I get no response with the canvas_ship.gotoAndPlay(12); and canvas_car.gotoAndPlay(7);, and I've spent hours trying different references. I’m not a big coder, but I’m sure this is a simple matter. Any help is appreciated!
<!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>
I've received help and will now share the answer. You are welcome. Just invite me over for dinner sometime.
In Adobe Animate, you'll need to change the library namespace (in the Publish settings in the Advanced tab I think) to lib_jerry or whatever custom name you come up with... so long as it's different than the other animation. Then just follow the setup in this code. You can call the functions from within the Animate animations.
<!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>
这篇关于如何两部动画画布元素之间的沟通？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
