~使い方編~ html5+createjsでのアニメーション処理とか
今回は使い方編。
完全に理解する時間と余裕も無く、現状(2015/07/27)は断片的な使い方を記述していく。
次回はなににしよう..
createjsを呼び出す
これは最初にやっておくとこ。
使う以上当然だし忘れないよね？
[code language="html"]
<head>
<script src="">https://code.createjs.com/createjs-2015.05.21.min.js">
</head>
<body>
...
[/code]
公式ドキュメントだとこんな感じでよびだしておく事になってる。
canvasをオブジェクトとして呼び出す
createjsを読み込んだらアニメーションさせる前にcanvasをcreatejsで扱うようにオブジェクトとして呼び出す必要がある。
勘違いしないでほしいのがあくまでcreatejsで扱うのではなく、createjsに内包されてるライブラリを使うのでそこは意識してほしい。
[code language="javascript"]
var stage = new createjs.Stage('canvas_id');
[/code]
canvasをオブジェクトにする時に大抵はお決まりとしてstageと命名するらしい。
オブジェクトを生成する
canvasに配置するモノたちをオブジェクトとして区切って設定していく必要がある。
オブジェクトは
[code language="js"]
var container = new createjs.Container();
container.rotation = 158;//向きの設定
container.x = 30;//横方向の位置の設定
container.y = 40;//縦方向の位置の設定
container.alpha = 0.5;//透過度の設定 1 で最高値(完全に透けない)０で透明になる
[/code]
こんな感じ。
他にもアルファと言って透過度を指定するものや色々あるのでここで設定する
この段階ではまだcanvasに描画はされていない。
オブジェクトを子要素として連結する
別のオブジェクトに対してオブジェクトを子要素として連結する的な。
例えば背景のオブジェクトがあってそこに何かを重ねる時とかに使う、と思う。ちょっとまだ曖昧。
[code language="js"]
var container = new createjs.Container();
container.rotation = 158;
container.x = 30;
container.y = 40;
container.alpha = 0.5;
base_container = new createjs.Container(); base_container.addChild(container); [/code]
オブジェクトにアニメーションを加える
オブジェクトにアニメーションを付けるにはtweenjsというライブラリが主だって使われる。
アニメーションは基本的には tween みたいな呼ばれ方をするしそんな記述をコードでもする。
オブジェクトへアニメーション用の宣言をする
まずオブジェクトのアニメーション設定を保持する変数を宣言し格納する。
この時に他にも複数のオブジェクトをアニメーションさせる場合は保存する変数を連想配列が入るように宣言するよい。
オプションもあり、第二引数の{}の」中で色々指定できる。
[code language="js"]
var tween;
tween = new createjs.Tween.get(mtr[key],{'useTicks':true});
[/code]
オブジェクトにアニメーションを設定する
アニメーションの設定を保存する領域を確保したらいよいよ動きを付けていく
[code language="js"]
var tween;
tween = new createjs.Tween.get(mtr[key],{'useTicks':true});
tween.to({rotation: 30}, 24);//rotationの位置を現在値から30まで24フレームで移動する
[/code]
第一引数はオブジェクトのアニメーションを付けたい要素名を指定してそこの数値を変更する。
だい二引数はそれにかかるフレーム数となっている
ちなみにこのtoとたくさん数珠つなぎでつなげると複雑に出来る
[code language="js"]
tween.to({rotation: 30, 24).to({rotation: 20}, 24).to({alpha: 0.4}, 24);
//30に向きを変えて、20に向きを変えて、透過度を0.4に落とす
[/code]
.toとは別に指定したフレーム数待機する命令もある [code language="js"] tween.wait(24).to({rotation: 50}, 24);//24フレーム待機してから向きを50に変更する [/code]
オブジェクトの大きさを倍率で指定して変更する
[2015/08/07追記]
オブジェクトを生成して描画する前に元の大きさより小さくor大きくしたいときに使える。
でも倍率指定だからそこだけ留意する事。
[code language="js"] var container = new createjs.Container(); container.scaleX = 1.3;//1.3倍の横幅にする。 container.scaleY = 1.5;;//1.5倍の縦幅にする。 [/code]
終わり
とりあえず思いついたのを整理しつつ書いてみた。
とはいえまだまだ理解してない事が多いので書き足したい。
