PR

SequentialTransition

 SequentialTransitionクラスとParallelTransitionクラスは自身でアニメーションを定義するのではなく、子アニメーションを実行するトランジションになります。

 SequentialTransitionクラスが子アニメーションをシーケンシャルに実行し、ParallelTransitionクラスが子アニメーションを同時に実行するという違いがあります。

 では、まずSequentialTransitionクラスを使ってみましょう。

サンプルのプロジェクト (こちらからダウンロードできます)
SequentialTransitionDemo.zip

 このサンプルでは2つのDukeが交互に移動するというアニメーションを行ないます。

 つまり、2つのDukeが移動する2種類のアニメーションをシーケンシャルに実行していきます。

 SequentialTransitionクラスが実行する子アニメーションは、コンストラクタで指定します。もしくは、getChildrenメソッドで子アニメーションのObservableListオブジェクトが取得できるので、そこに追加していきます。

リスト10●SequentialTransitionクラスの使用例
        // アニメーション #1
        TranslateTransition transition1 = new TranslateTransition(Duration.millis(1_000), duke1);
        transition1.setToX(300);
        transition1.setToY(200);
        
        // アニメーション #2
        TranslateTransition transition2 = new TranslateTransition(Duration.millis(1_000), duke2);
        transition2.setToX(-300);
        transition2.setToY(200);

        // 複数のアニメーションを途中にポーズを入れて
        // シーケンシャルに行なう
        transition = new SequentialTransition(
            transition1,
            new PauseTransition(Duration.millis(200)),
            transition2,
            new PauseTransition(Duration.millis(200))
        );

 ここでは、赤字で示したようにコンストラクタの引数でシーケンシャルに行なうアニメーションを指定しています。

 シーケンシャルにアニメーションを実行している時にアニメーションを行なわないポーズの時間を設けたい場合があります。

 たとえば、このサンプルのように2つのイメージを移動させる場合でも、一方の移動が終了した直後にもう一方が動き始めてしまうと、せわしない印象を受けてしまいます。このような場合に、アニメーションの間に若干のポーズを入れることで、よりスムーズにアニメーションを見せることができます。

図9●SequentialTransitionの実行例
図9●SequentialTransitionの実行例
[画像のクリックで拡大表示]

 ポーズを入れたい場合は、PauseTransitionクラスを使用します。ポーズを行なう時間はdurationプロパティで指定するか、コンストラクタの引数として指定します。

 リスト10では、PauseTransitionクラスのコンストラクタで200ms のポーズを取るように指定しています。

 では、実行してみます。結果を図9に示しました。

 2つのDukeは直線に沿って移動します。一方がアニメーション終了したら、200ms後にもう一方のDukeが動き始めます。