前回の第17回「ロゴがパーティクルで弾けるアニメーション」では、ロゴひとつをパーティクルにしてアニメーションさせた(第17回サンプル1「Away3D 15/03/13: Exploding a logo using particles」)。今回は、ロゴの画像をもうひとつ加えたい(図1)。複数ならいくつでも同じなのだから、ふたつといわず必要な数(4つ)読み込めばよいと思われるかもしれない。けれど、数が複数になると、アニメーションもそれに合わせて変えなければならないところが出てくる。まずは、2つで修正すべき点を絞った方が進めやすい。
2つのロゴがパーティクルで弾けるアニメーションを動かす
アニメーションの調整は後回しにして、とにかくふたつのロゴからつくったパーティクルのアニメーションを動かしたい。第1に、読み込む素材のビットマップファイルが2つになるので、URLを配列に入れて扱う。使うFirefoxロゴのファイルとして、awayjs-examplesの中のbin/assets/firefox.pngをassetsフォルダに納めた(図2)。リスナーを定める関数(setListeners())は、以下のように変数(assetsURLs)の配列からfor文でそれぞれのURLの画像を読み込む。
第2に、リスナー関数(onResourceComplete())が読み込んだ画像からつくったBitmapDataオブジェクト(bitmapData)は、これも配列の新たな変数(bitmapDatas)に納める。パーティクルをつくる処理は2つのオブジェクトがつくられてからなので、配列エレメントが2つできたことをif条件で確かめた。
そして第3に、パーティクルをつくる関数(createParticles())が、BitmapDataデータオブジェクトの配列(bitmapDatas)から順に取り出したエレメントからパーティクルの情報をつくる(setParticlesData()関数の呼出し)。これらの手を加えると、とりあえずエラーなくアニメーションは動く。
ここまでのスクリプトは以下のコード1にまとめた。もっとも、はじめに注意したとおり、アニメーションとしてはまったくいただけない。ChromeとFirefoxのロゴが合体してしまう(図3)。これは、2つのロゴのアニメーションの行き先が同じ位置になっているためだ。ロゴごとにアニメーションを変えてやらなければならない。
2つのロゴのアニメーションを変える
パーティクルのアニメーションの行き先は、ParticleBezierCurveNodeを用いてベジエ曲線で定めた。パーティクルの色や座標はピクセル単位で、それぞれ配列(colorValuesとcolorPoints)に納めている。これらの配列を入れ子にして、ロゴごとに分けることも考えられる。
けれど、パーティクルを初期化するときに行き先座標を定めさえすれば、その後のアニメーションでどのロゴの値かはとくに知らなくて済む。そこで、色や座標の値をエレメントに加えたとき、2つのロゴが切り替わるインデックスを別の変数(colorSeparations)にとっておくことにした。ロゴの数は増えるので、この変数も配列にしておく。インデックスを得るのは、パーティクルをつくる関数(createParticles())になる。
そして、パーティクルを初期化する関数(initColorParticle())だ。引数(properties)に受け取るParticlePropertiesオブジェクトのParticleProperties.indexプロパティで今初期設定しているパーティクルのインデックス(index)がわかる。配列(colorSeparations)にとっておいたロゴの切り替わるインデックスとの大小を見比べて、アニメーションの行き先(endPoint)のx座標を変えた。
もうひとつ、2つのロゴでアニメーションのタイミングもずらすことにしよう。前回解説したとおり、このコードではAnimatorBase.update()メソッドに総経過時間を渡して、パーティクルのいつの状態を表示するのかを決めている。この経過時間をロゴごとに変えれば、アニメーションの動きも異なってくる。そのためには、ParticleAnimatorオブジェクトをロゴごとに定めなければならない。そこで、オブジェクトを新たな配列の変数(colorAnimators)に納める。
パーティクルのアニメーションを定める関数(startParticleAnimation())には、2つ目の引数にParticleAnimatorオブジェクトの数(numAnimators)を加えた。Mesh.animatorプロパティを定めるMeshオブジェクトも、ロゴごとにつくる。ただし、設定は同じでよいのでMesh.clone()メソッドによる複製(colorParticleMesh)を用いた。
そして、描画を更新する関数(render())で、三角関数のsinにより導く経過時間(_time)の周期を2つのロゴの間でπ/4(= 45度)ずらした。これで2つのロゴのアニメーションは軌道が変わるとともに、その周期にも差が生じる。2つのロゴのパーティクルは異なる動きになる。
スクリプトは以下のコード2にまとめた。これで2つのロゴのパーティクルの動く先が変わり、タイミングもずれる。あわせて、jsdo.itにサンプル1のコードを掲げたので確かめてほしい。アニメーションには、まだ気になるところがあるかもしれない。それは次回に譲ろう。もちろん、ロゴの数も増やしたい。