複数のcanvasアニメーションを画面内に入ったタイミングでスタートさせたい

前提・実現したいこと

AnimateCCで作成したcanvasアニメーションを1枚のHTMLに複数配置しています。
これを対象のcanvasが画面内に入ったタイミングでそれぞれスタートさせたいです。
配置されるcanvasの数や位置はページによって異なりますが、
できれば配置されるcanvas数に関係なく一括でコントロールできるようにしたいです。

発生している問題・エラーメッセージ

1枚のHTMLに複数のcanvasを配置することはできたのですが、
全てロードのタイミングで同時にスタートしてしまいます。

該当のソースコード

HTML
1<html>
2<head>
3<meta charset="UTF-8">
4<meta name="authoring-tool" content="Adobe_Animate_CC">
5<title>sample</title>
6<!-- write your code here -->
7<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
8<script src="assetsratio_pc.js"></script>
9<script src="assetsratio_sp.js"></script>
10<script src="measuresratio.js"></script>
11<script src="top.js"></script>
12<script src="common.js"></script>
13
14</head>
15<body>
16
17		<div id="animation_container0">
18			<canvas id="canvas0" width="260" height="260"></canvas>
19			<div id="dom_overlay_container0"></div>
20		</div>
21		
22		
23		<div style="height: 1000px">他のコンテンツ</div>
24		
25		<div id="animation_container1">
26			<canvas id="canvas1" width="844" height="460"></canvas>
27			<div id="dom_overlay_container1"></div>
28		</div>
29		
30		<div style="height: 1000px">他のコンテンツ</div>
31		
32		<div id="animation_container2">
33			<canvas id="canvas2" width="345" height="397"></canvas>
34			<div id="dom_overlay_container2"></div>
35		</div>
36	
37</body>
38</html>

▼top.js

JavaScript
1    
2var stage;
3var canvas0, stage0, exportRoot0, anim_container0, dom_overlay_container0, fnStartAnimation0;
4var canvas1, stage1, exportRoot1, anim_container1, dom_overlay_container1, fnStartAnimation1;
5var canvas2, stage2, exportRoot2, anim_container2, dom_overlay_container2, fnStartAnimation2;
6 
7function init0() {
8	canvas0 = document.getElementById("canvas0");
9	anim_container0 = document.getElementById("animation_container0");
10	dom_overlay_container0 = document.getElementById("dom_overlay_container0");
11	var comp=AdobeAn.getComposition("F0BA06869C574E0F86857DBBA02CE764");
12	var lib0=comp.getLibrary();
13	handleComplete0({},comp);
14}
15
16function init1() {
17	canvas1 = document.getElementById("canvas1");
18	anim_container1 = document.getElementById("animation_container1");
19	dom_overlay_container1 = document.getElementById("dom_overlay_container1");
20	var comp1=AdobeAn.getComposition("3F7DA3D3BA86453D9104575D4B4ABC7E");
21	var lib1=comp1.getLibrary();
22	handleComplete1({},comp1);
23}
24
25function init2() {
26	canvas2 = document.getElementById("canvas2");
27	anim_container2 = document.getElementById("animation_container2");
28	dom_overlay_container2 = document.getElementById("dom_overlay_container2");
29	var comp2=AdobeAn.getComposition("32FC0171A22445EC84C8E9BEBB26ED91");
30	var lib2=comp2.getLibrary();
31	handleComplete2({},comp2);
32}
33
34function handleComplete0(evt,comp) {
35	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
36	var lib0=comp.getLibrary();
37	var ss0=comp.getSpriteSheet();
38	exportRoot0 = new lib0.measuresratio();
39	stage = new lib0.Stage(canvas0);	
40	stage.addChild(exportRoot0);
41	//Registers the "tick" event listener.
42	fnStartAnimation0 = function() {
43		createjs.Ticker.setFPS(lib0.properties.fps);
44		createjs.Ticker.addEventListener("tick", stage);
45	}	    
46	//Code to support hidpi screens and responsive scaling.
47	//AdobeAn.makeResponsive(false,'both',false,1,[canvas0,anim_container0,dom_overlay_container0]);	
48	AdobeAn.compositionLoaded(lib0.properties.id);
49	fnStartAnimation0();
50}
51
52function handleComplete1(evt,comp) {
53	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
54	var lib1=comp.getLibrary();
55	var ss1=comp.getSpriteSheet();
56	exportRoot1 = new lib1.assetsratio_pc();
57	stage1 = new lib1.Stage(canvas1);	
58	stage1.addChild(exportRoot1);
59	//Registers the "tick" event listener.
60	fnStartAnimation1 = function() {
61		createjs.Ticker.setFPS(lib1.properties.fps);
62		createjs.Ticker.addEventListener("tick", stage1);
63	}	    
64	//Code to support hidpi screens anwd responsive scaling.
65	//AdobeAn.makeResponsive(false,'both',false,1,[canvas1,anim_container1,dom_overlay_container1]);	
66	AdobeAn.compositionLoaded(lib1.properties.id);
67	fnStartAnimation1();
68}
69
70function handleComplete2(evt,comp) {
71	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
72	var lib2=comp.getLibrary();
73	var ss2=comp.getSpriteSheet();
74	exportRoot2 = new lib2.assetsratio_sp();
75	stage2 = new lib2.Stage(canvas2);	
76	stage2.addChild(exportRoot2);
77	//Registers the "tick" event listener.
78	fnStartAnimation2 = function() {
79		createjs.Ticker.setFPS(lib2.properties.fps);
80		createjs.Ticker.addEventListener("tick", stage2);
81	}	    
82	//Code to support hidpi screens anwd responsive scaling.
83	//AdobeAn.makeResponsive(false,'both',false,1,[canvas2,anim_container2,dom_overlay_container2]);	
84	AdobeAn.compositionLoaded(lib2.properties.id);
85	fnStartAnimation2();
86}

▼common.js

JavaScript
1$(function(){
2	scrollAnimation();
3	var $win = $(window);
4	$win.on("load", function() {
5		init0();
6		init1();
7		init2();
8	});
9});
10
11/* ==========================================================
12!Scroll Animation
13========================================================== */
14function scrollAnimation(){
15	var AnimTrigger = $('[data-timing="scroll"]'); //アニメーショントリガー
16	var windowHeight = $(window).height(); //ウインドウの高さ
17
18	// ロードした際に可視範囲に入っていたら実行される
19	$(window).on('load',function(){
20		AnimTrigger.each(function(){
21			var imgPos = $(this).offset().top; //「AnimTrigger」の位置
22
23			if (imgPos < windowHeight){
24				$(this).addClass("aniOn");
25			}
26		});
27	});
28
29	// スクロールした際に「AnimTrigger」ごとに、以下に記述する内容が実行される
30	$(window).scroll(function (){
31		var scroll = $(window).scrollTop(); //スクロールした量
32
33		AnimTrigger.each(function(){
34			var imgPos = $(this).offset().top; //「AnimTrigger」の位置
35
36			//アニメーションする条件＝「画面の下から1/5まできた時点でアニメーション」
37			//if (scroll > imgPos - windowHeight + windowHeight/5){
38				if (scroll > imgPos - windowHeight/2){
39				$(this).addClass("aniOn");
40			}
41		});
42	});
43}

試したこと

canvasの他にcss animationで特定要素が画面に入ったらアニメーション効果をつけて出現する
ギミックを実装しており、そのために特定要素が画面に入ったら特定のclassを付与する関数scrollAnimation()は用意してあります。
その関数の中でclass付与するところに単純に init0(); init1(); init2(); を入れてみたりもしましたが、
loadのタイミングの方では発火せず、scrollのところではスクロール中何度も呼び出されてしまって大変なことになってしまいました。。

補足情報（FW/ツールのバージョンなど）

こちらはAnimateCCが書き出したcanvasアニメーション本体のJSをそのまま読み込んでいるだけになります。

AnimateCC、CreateJS、Canvasともにこれまで全く経験ありません。今回始めて扱うものになりますので
初歩的なことが分かってないと思いますが、どなたかご教授いただけますと助かります。。。

行動規範の内容に同意します

回答1件

ベストアンサー

loadのタイミングの方では発火せず、

js
1    $(window).scroll(function (){
2        /* 略 */
3    }).scroll(); // 1回実行しておく

scrollのところではスクロール中何度も呼び出されてしまって大変なことになってしまいました。。

1回実行したら、どこかに実行したというフラグを各カンバスごとに作っておいて、2回目以降は実行しなければよいのでは。

投稿2019/09/12 17:01

kei344

総合スコア69596

aKusano

2019/09/13 02:30

ありがとうございます！アドバイスを元に無事loadまたはscrollのタイミングで各canvasを実行させることができるようになりました！ついでにページ内のcanvas数が違った場合でも使い回せるようにしてみましたが、もし何か気になる所がありましたらアドバイスいただけますと幸いです！ <script> $(function(){ var $trigger = $("canvas"); var windowHeight = $(window).height(); var num = $trigger.length; var initArray = []; var initFlag = []; for(var i = 0; i < num; i++){ var str = 'init'+i+'()'; initArray.push(str); initFlag.push('false'); } $(window).on("load",function(){ $trigger.each(function(i){ var pos = $(this).offset().top; if (pos < windowHeight){ if(initFlag[i] == 'false'){ eval(initArray[i]); initFlag.splice(i,'true'); } } }); }); $(window).on("scroll",function(){ var scroll = $(window).scrollTop(); $trigger.each(function(i){ var pos = $(this).offset().top; if (scroll > pos - windowHeight/2){ if(initFlag[i] == 'false'){ eval(initArray[i]); initFlag.splice(i,1,'true'); }else{ return; } } }); }); }); </script>

aKusano

2019/09/13 02:39

あ、loadの方で1箇所間違ってました。 ✕ initFlag.splice(i,'true'); ○ initFlag.splice(i,1,'true');

kei344

2019/09/13 03:00

別質問にしてもらうほうがよいとは思いますが、 1. eval は使わない 2. top.js を整理したほうがよい。handleComplete は一つの関数を使いまわせるし init も Id末尾が違うだけ 3. load を分けて処理する理由がわからない（回答の1個目参照） 4. windowHeightは画面幅が変わる際に変わる可能性が高いのでscrollイベント内で採るほうがよいくらいです。

aKusano

2019/09/13 03:27

ありがとうございます〜。 top.jsについては、私もできれば全ページで使いまわしできるようにしたいな、とは思ってるのですが、途中で各Canvas固有の情報が2箇所ほど出てくるのでどうやって使いまわし出来るようにしようかな？というのをまだ思案中でした。今回とりあえず動くようにするのが先決だったので、この後更にブラッシュアップしてみたいと思います！詰まったらまた新たに質問させていただきますので、その際はぜひともよろしくお願い申し上げます。m(_ _)m

行動規範の内容に同意します