質問: ### 前提・実現したいこと animate ccで作成したcanvasとjavascriptとHTMLに埋め込んでアニメーションを表示しています。 ブラウザのスクロールと連動して(150pxや300pxに到達した時などに) アニメーションをスタートさせたいのですがうまくいきません。 どのようなアプローチやコード書いていけばいいかご教授願えませんでしょうか。 ### 発生している問題・エラーメッセージ ``` bodyを読み込んだ段階でスタートしてしまっているので、これを特定のスクロール位置に来た時にアニメーションをスタートさせたい。 ``` ### 該当のソースコード ### 試したこと jquaryやjavascriptなどを調べながら、タグのいじったりしてきたのですが全くうまくいきません。 ### 補足情報(言語/FW/ツール等のバージョンなど) より詳細な情報
回答: アニメーションイベントを開始させる処理がどれか判別できないので、ばっくりとにはなりますが (`lib.team()`がそれでしょうか?) * アニメーション開始イベントをinit()から別にする * windowのスクロールイベントを設定 * スクロールイベントに対して条件(150pxや300px以上になると...)を満たすとアニメーション開始イベントをコールバック * スクロールイベントはスクロールしている間、ずっと呼ばれ続けるので一度飛び出されたら処理を止める (※条件が「300px以上」なら、301,302,303...とスクロールする毎に条件を満たしている限り何度でも呼ばれる) と、すれば良いです。 以下、参考コードとして。 ``` function init(){ //省略 } function animation(){ //ここにアニメーションの処理 } var animation = false; //スクロールイベント window.addEventListener('scroll' ,function(){ var move = window.pageYOffset; //スクロール量を取得 if(move >= 300 && !animation){ if(animation) return;//アニメーションを1回だけしか呼び出されないように animation = true; createjs.Ticker.addEventListener("tick", animation);//tickイベントでコールバック } }); ``` `createjs.Ticker.addEventListener("tick", stage);`がstageを自動的に更新(update())するので、 init()内の`stage.update()`は必要ないかと。