今まで使用してきたアニメーションは基本的には動きがほとんどありませんでした。しかし，最近の傾向としてユーザインターフェースにアニメーションを取り入れることが必須になってきています。

たとえば，MacOS Xでドックにアプリケーションがヒュッと吸いこまれていくのもアニメーションです。これに限らずOSレベルから個々のアプリケーションまで，さまざまなところでアニメーションが使われています。このようなアニメーションをユーザインターフェースに組み込んでいくことで，表現力を高めることができるのです。

もちろん，JavaFXでもアニメーションを扱うことが可能です。しかも，Swingなど既存のJavaのユーザインターフェース技術でアニメーションを扱うより，JavaFXは簡単にアニメーションを実現することができます。

そこで，これから2回に渡ってJavaFXのアニメーションについて解説していくことにしましょう。今回が基礎編，次回が応用編です。

アニメーションの基礎

アニメーションというのはもともとは複数の静止画像を時間に沿って切り替えることによって，動きを表現する技術です。ユーザインターフェースでも基本は同じです。時間の経過と共に複数の描画を切り替えることでアニメーションを実現することができます。

つまり，時間というのがアニメーションではとても重要になります。たとえば，図1はAdobe Flash Professionalの編集画面です。上部にあるタイムラインが時間の流れを表します。デフォルトでは12fps，つまり1秒間に12枚の描画を切り替えます。

1秒間のアニメーションを作成するには，基本的には12fpsであれば12枚の描画を用意する必要があります。しかし，コンピュータの力を使えば，その手間を大幅に減らすことができます。

図2はFlashで作成した2秒のアニメーションをループさせています。2秒ですから24枚の描画が必要です。しかし，実際に筆者が作成したのは2枚だけです。このような単純なアニメーションであれば，途中の状態はコンピュータで補間させればいいのです。

実際にFlashが補間した描画を図3に示します。緑線で表されているのがFlashが補間した部分です。このように単純なアニメーションであれば，コンピュータの力を借りることによって簡単にアニメーションが作成できるのです。

JavaFX Scriptの場合，タイムラインはjavafx.animation.Timelineクラスで表します。また，特定の時間での状態を表すのがjavafx.animation.KeyFrameクラスです。インタープリタ版ではdurという演算子を使用していましたが，より高い表現を可能にするため現在のように変更になったようです。

では，この2つのクラスを使ってアニメーションを作成してみましょう。なお，今回作成したサンプルプログラムのソースを含んだNetBeansのプロジェクトは以下のリンクよりダウンロードできます。

• NetBeansのプロジェクト