こんにちは、太田です。3回ほどJavaScriptの基礎的な内容が続いたので、今回はグラフィカルなアニメーションについて解説します。グラフィカルなJavaScriptというと、難しい・応用的なイメージがあるかもしれませんが、JavaScriptでのアニメーションとはすなわちCSSを段階的に操作するということで、そのポイントを抑えれば中身は単純なものです。
アニメーションの前提知識
HTMLにおける通常のアニメーションを構成するのは、「特定の要素」に対して、「そのCSSプロパティ」を「ある時点からある時点まで」の時間の中で、「ある値からある値に操作」する、といった要素です。
特定の要素と、CSSプロパティについては問題ないと思います。問題となるのは「時間と値の操作」です。
まず、単純にインクリメントするだけというサンプルを見てみましょう。
単純計算で言えば、1ms置きに1000回インクリメントしているので、1秒間の処理となるはずですが、実際には1秒間に1000回もの描画(1000FPS)を行うことはまず不可能です。このままでは実行される環境に大きく依存した(低スペックな環境では極端に遅い)アニメーションになってしまいます。
そこで、開始時刻から経過した時間で現在の位置を決め、その位置に移動させる方法が一般的です。
つまり、1秒間で100px移動させたい場合なら、300msの時点では30px移動していればよく、500msでは50px、1000msを超えたら100pxにしてアニメーションを終了すればよい、ということです。時間を基準にすれば、時間通りにアニメーションが終わるというごく当たり前なことです。
この方法ではハイスペックな環境では滑らかなアニメーションに、ロースペックな環境では最低限のアニメーションになります。
アニメーションの汎用化とEasing関数
さて、上記の実装では汎用性がないので、もう少し使い回しができるようにしてみましょう。特に、直線的な動きだけでなく、動きにバリエーションを増やしたいと思います。その際によく使われるのがEasing関数と呼ばれるものです。
Easing関数とは、(主に)経過時間、初期値、変動値、継続時間の4つの変数から現在の値を求めることができる関数です。
easing関数は自作もできますが、よく使われるのはActionScriptのライブラリであるTweenerがサポートしている関数群です。Tweener Documentation and Language Referenceにそのサンプルがあります。
JavaScriptから扱う場合はTweenerのJavaScriptポートである、JSTweenerにその関数群が実装されています。
アニメーションのライブラリ化
さて、実際にアニメーションさせたいときはjQueryやJSTweenerなどを使えばよいのですが、折角なのでシンプルなライブラリにしてみましょう。ライブラリといっても、汎用的なアニメーション関数程度のものです。
ライブラリ化にあたって、1つのタイマー(setInterval)だけで動くように注意します。これは、ブラウザによって(主にIEにおいて)はパフォーマンスに大きな差が出るためです。
少々長いですが、コメントなどを除けば70行程度しかありません。また、ブラウザごとの分岐処理などもありません(実際にCSSを操作する上ではIE用の対応などが必要になることは多いですが)。
なお、記述がシンプルになるのでアニメーション関数のプロパティとしてメソッドや配列などを定義していますが、もちろん通常のオブジェクトに各メソッドを定義する実装でも構いません。
この関数を使うときは次のように呼び出します。
第一引数に操作対象の要素のstyleオブジェクトを渡し、第2引数でそのプロパティと値を定義して、第3引数でアニメーションの定義を決定しています。
最後に簡単なアニメーション・デモを紹介します。
まとめ
今回はアニメーションの基礎とそれをベースにライブラリ化を行ってみました。次回はアニメーションの実用的なケースとCSS3に関係した部分について解説します。