Flash を初めてから十数年が経ち、Flasherがレッドリストに載ってしまった今でも、他の言語でプログラミングを用いて動的なアニメーションをつける機会は多々あります。ここで言う動的アニメーションとは、時間軸に沿って再生するのみでなく、動的に生成されるものやインタラクティブなものも含みます。気に入っているポイントをまとめてみました。

アニメーションとは

animation（アニメーション）は、ラテン語で霊魂を意味するanima（アニマ）に由来しており、生命のない動かないものに命を与えて動かすことを意味する。（Wikipedia）のだそうです。命の無いものに命を与えるというデザイン行為と言えます。その作り方は、ご存知の通り、手で描いたり一枚一枚写真に撮ったものを動かして映像にしたり、3Dソフトで動かしてみたりして映像にするわけですが、プログラミングで作る場合は、違ったアプローチをとります。

動的アニメーションの勘所

プログラミングを使って左から右へ車を動かすアニメーションを作ろうとした場合、点Aから点Bまで、どのくらいの時間とどのような補間で移動させるかが鍵になります。RobertPenner のイージングの公式が、様々なライブラリに移植されて使われてきました。動きのタメツメが気軽に試せますが、自分の公式を持つのも表現の幅を持たせるのには有効です。数学が得意であれば Mac標準アプリのGrapherなどを使って、自分の公式を作ってみても楽しいでしょう。中には James Patterson のような手描きのアニメーションと組み合わせるハイブリッドなクリエイターもいます。

アニメーターには良く知られたディズニーアニメーションの12の基本原則があります。こちらをプログラミングで再現することも可能です。座標や、スケール、回転に対して１フレーム毎にどのように「値」を動かして、全体の動きを作るところが手描きのアニメーションと異なるところです。

プログラミングで動くアニメーションの利点

一枚一枚描く必要がありません。コードで世界のルールを作ってしまえば、あとはコンピューターが演算して結果を表示してくれます。毎回異なるパターンを持ちながら、永遠に繰り返す波を手描きのアニメーションで描くことは不可能ですが、プログラミングならそれが可能になります。（簡単にできるかどうかはさておき）。煙やパーティクルを一粒一粒描きたくない人にはぴったりだと思います。

再利用性があります。言語によって書き方や、実行環境の影響は受けますが、ロジックは共通で使えます。テトリスを例に考えてみましょう。テトリスはフィールド上のXYのデータを二次元配列と呼ばれる入れ子になった配列で管理します。テトリミノ（落ちてくるLとかの形をしたブロック）のXYのデータも二次元配列で管理します。テトリミノが移動や回転をする度に、フィールド用の二次元配列との衝突がないかチェックして、横一列に揃っていれば、横一列分のデータを消して、表示にも反映させるというようなことを繰り返します。ロジックは、HTML5でも、Processingでも、Unityでも同じように有効です。同じようにオブジェクトの動かし方についても再利用性があります。

Unityを使って2Dから3Dにしてみた例。

試行錯誤が容易です。数百のパターンを即座に生み出したり、数万個のオブジェクトを動かしたり、試行錯誤が容易にできます。かつて praystation.com で私の目を楽しませてくれた Joshua Davis は、Processingを用いて、グラフィックのルールをプログラミングをすることで、手作業では膨大な時間のかかるグラフィックデザインを作り上げてきました。アクションペインティングのような偶発性を狙った手法も、プログラミングをすることで容易になります。

偶然と付き合うことができます。じゃんけんを例に考えてみましょう。じゃんけんは、相手がランダムに手を出すので、考える楽しみが生まれます。同じ手をだしてくる相手と戦っても面白くありません。（参考：サザエさんじゃんけん研究所公式ウェブサイト）ランダム性を持たせることで、動きやロジックに揺らぎを作ることができます。単に完全無作為なランダムもあれば、制御されたランダム値を用いることもできます。（参考：various functions with different distributions for Math.random() | Pixelero）

インタラクションをつけることができます。Webであればクリックに、スマホであればタップやスワイプに反応させたりできます。音楽をリアルタイムで解析し、アタック音に反応させたり、温度や圧力などセンサーからの入力値を表示に反映させて、映像の触り心地を作ることもできます。かつて、Processing や Cinder でハイクオリティな動的映像を発表してきた　Robert Hodgin の作品は iTunesのビジュアライザーでも観ることができます。

まとめ。動的アニメーションについて気に入っている点をまとめてみました。動的アニメーションは手描きのアニメーションやストップモーションに比べて、いわゆる作家性と呼ばれるような「味」が出にくく、ストーリーアニメを作るにも向いていません。しかし、上記で書いたような利点や、インタラクションを用いて、ユーザーとの体験を作るためのアニメーションには力を発揮します。動的アニメーションについて気になった方は少々お高いですが、GENERATIVE DESIGN の日本語訳版を眺めてみると良いでしょう。