アニメーションは効果的に使うことで、GUIの表現力を高めることができます。最近では、CSS 3でもアニメーションが可能になるなど、GUIを構成する上でアニメーションは欠かせない要素になっています。
もちろん、JavaFXでもアニメーションが可能です。
JavaFXでは、アニメーションを高レベルAPIのトランジションと、低レベルAPIのタイムラインという2種類の方法で記述できます。
そこで、今月はトランジション、来月はタイムラインについて解説していきます。
アニメーションの原理
アニメーションは一定時間ごとに表示要素を切り替えることによる、動きを表現するための手法です。
たとえば、図1の9枚のイメージをある時間ごとに切り替えることで、図2に示したDukeが手を振るアニメーションを実現できます。
コンピュータでアニメーションを行なうときも、このように表示する要素を変化させて、ある時間ごとに表示を切り替えていきます。しかし、すべての要素を指定するのはなかなか大変です。
そこで、移動やスケーリングなどのアニメーションでは、始めの状態と、最後の状態だけ指定し、後はコンピュータで補間することでアニメーションの記述を容易にする手法が使用されます。
たとえば、図3に示したようにDukeのイメージを拡大するアニメーションを行なうことを考えましょう。この場合、始めのサイズと終わりのサイズを指定します。途中の状態は自動的に補間をして、表示します。
JavaFXのアニメーションでは、トランジションがここで示したように始めと終わりを指定したアニメーションになります。一方のタイムラインはキーとなる複数の時間での状態を指定し、その間を補間するようにアニメーションします。
このためトランジションは比較的単純なアニメーションに適しており、タイムラインは複雑なアニメーションを記述する場合に使用します。
トランジションはjavafx.animation.Transitionクラスで表し、タイムラインはjavafx.animation.Timelineクラスで表します。いずれも、javafx.animation.Animationクラスのサブクラスとなります。
では、次章からトランジションについて解説していきます。
