HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第4回 時間差をつけたトゥイーン

この記事を読むのに必要な時間:およそ 5.5 分

今回から,また新たなお題に取り組もう。CreateJSのサイトからネタを頂戴する。TweenJSのデモTWEEN CIRCLES図1)。同心円のリングが,ステージ上のクリックした位置に,時間差でトゥイーンする。TweenJSの応用例になる。

図1 ステージ上のクリックした位置に同心円のリングが時間差でトゥイーンする

図1 ステージ上のクリックした位置に同心円のリングが時間差でトゥイーンする

オブジェクトをステージ上のクリックした位置にトゥイーンする

トゥイーンの基本は前回のお題ですでに解説した。今回新たに覚えることは,ステージをクリックしたときのイベントとクリックした座標の取得だ。

第1のクリックは,ステージに置いたインスタンスに対してなら,DisplayObject.clickイベントで捉える。しかし,インスタンスのあるなしにかかわらず,ステージのどこをクリックしてもよいというときのイベントは,Stage.stagemouseup(文字列"stagemouseup")になる。

Stageオブジェクト.addEventListener("stagemouseup", リスナー関数);

マウスポインタのステージ上の座標も,Stageオブジェクトから調べられる。プロパティStage.mouseXStage.mouseYがそれだ。これだけわかれば前回までの知識と合わせて,取りあえずリングひとつを,ステージ上でクリックした位置にトゥイーンするアニメーションはつくれるだろう。

script要素全体は,後にコード1として掲げた。その中から,ステージでクリックした位置にトゥイーンする部分を次に抜き書きした。

StageオブジェクトのStage.stagemouseupイベントにリスナー関数(startTween())を加えている。そして,リスナー関数は,ステージ上のクリックされた座標をリングのインスタンス(circle)とともに,トゥイーンを定める関数(setTween())に引数として渡す。トゥイーンはTween.to()メソッドでインスタンスの位置をトゥイーンする。イージングにはEase.bounceOutを用いた。

なお,リングをつくる関数(createCircle())には,引数にリングの太さと色,および半径を渡して,戻り値はShapeインスタンスで受け取る。

var stage;
var circle;
function initialize() {
  // ...[中略:...
  circle = createCircle(10, "#113355", 20);
  // ...[中略:...
  stage.addChild(circle);
  stage.addEventListener("stagemouseup", startTween);
  createjs.Ticker.addEventListener("tick", stage);
}
function createCircle(stroke, color, radius) {
  // ...[中略:...
}
// ...[中略:...
function startTween(eventObject) {
  setTween(circle, stage.mouseX, stage.mouseY, 1500);
}
function setTween(target, nX, nY, duration) {
  createjs.Tween.get(target)
  .to({x:nX, y:nY}, duration, createjs.Ease.bounceOut);
}

さらに,お題の動きと同じように,始まりはステージ上のランダムなxy座標(nXとnY)から,リングを真ん中にトゥイーンさせた。

var stage;
var circle;
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  stage = new createjs.Stage(canvasElement);
  var nWidth = canvasElement.width;
  var nHeight = canvasElement.height;
  var nX = Math.random() * nWidth;
  var nY = Math.random() * nHeight;
  circle = createCircle(10, "#113355", 20);
  setAppearance(circle, nX, nY);
  setTween(circle, nWidth / 2, nHeight / 2, 1500);
  // ...[中略:...
}
// ...[中略:...
function setAppearance(instance, nX, nY) {
  instance.x = nX;
  instance.y = nY;
}

これで,リングひとつを置いて,ステージ上のクリックした座標にトゥイーンアニメーションさせることができる図2)。script要素全体は,次のコード1のとおりだ。

図2 ステージをクリックした位置にリングがトゥイーンアニメーションする

図2 ステージをクリックした位置にリングがトゥイーンアニメーションする

コード1 オブジェクトひとつをステージ上のクリックした位置にトゥイーンさせる

<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script>
var stage;
var circle;
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  stage = new createjs.Stage(canvasElement);
  var nWidth = canvasElement.width;
  var nHeight = canvasElement.height;
  var nX = Math.random() * nWidth;
  var nY = Math.random() * nHeight;
  circle = createCircle(10, "#113355", 20);
  setAppearance(circle, nX, nY);
  setTween(circle, nWidth / 2, nHeight / 2, 1500);
  stage.addChild(circle);
  stage.addEventListener("stagemouseup", startTween);

  createjs.Ticker.addEventListener("tick", stage);
}
function createCircle(stroke, color, radius) {
  var circle = new createjs.Shape();
  var myGraphics = circle.graphics;
  myGraphics.setStrokeStyle(stroke);
  myGraphics.beginStroke(color);
  myGraphics.drawCircle(0, 0, radius);
  return circle;
}
function setAppearance(instance, nX, nY) {
  instance.x = nX;
  instance.y = nY;
}
function startTween(eventObject) {
  setTween(circle, stage.mouseX, stage.mouseY, 1500);
}
function setTween(target, nX, nY, duration) {
  createjs.Tween.get(target)
  .to({x:nX, y:nY}, duration, createjs.Ease.bounceOut);
}

</script>

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入