前回は基本的なアニメーションということで，javafx.animation.Timelineクラスとjavafx.animation.KeyFrameクラスの使い方を紹介しました。今回は，応用編ということで，標準で提供されているさまざまなアニメーションについて紹介していきます。

今回，紹介するアニメーションはすべてjavafx.animation.transitionパッケージで定義されており，javafx.animation.transition.Transitionのサブクラスとなります。Transitionクラスは内部にアトリビュートとしてTimelineオブジェクトを保持しています。このため，Timelineクラスを使わずともアニメーションを実現することができます。

なお，今週使用したサンプルのソースを含めたNetBeansのプロジェクトは下記のリンクよりダウンロードすることができます。

• NetBeansのプロジェクト

移動，拡大・縮小，そして回転

前回のサンプルで移動のアニメーションを使用したように，移動のアニメーションはもっともよく使われるアニメーションの1つです。その他にも拡大・縮小と回転がよく使用されています。

そのため，これら3種類のアニメーションは，簡単に実現できるように専用のクラスが提供されています。それぞれ，移動がTranslateTransitionクラス，拡大・縮小がScaleTransitionクラス，回転がRotateTransitionクラスとなります。これら3つのクラスの使い方は共通しているので，ここでは回転を行うRotateTransitionクラスを使ってみましょう。

これらのクラスのスーパークラスであるTransitionクラスはnodeアトリビュートを持ちます。このnodeアトリビュートが回転や移動の対象となります。

var node: Node = Group { ... };

var rotateTransition = RotateTransition {
    // 回転の対象ノード
    node: node
    
    // 回転角度の設定
    // 0度から720度回転させる
    fromAngle: 0
    byAngle: 720

    // これらのアトリビュートは Timeline クラスに準ずる
    duration: 5s
    repeatCount:4
    interpolate: Interpolator.EASEBOTH
    autoReverse: true
};

// 回転の開始
rotateTransition.play();

回転の角度を設定するには，開始角度と回転角度を指定する方法と，開始角度と終了角度を指定する方法があります。開始角度と回転角度は，それぞれfromAngleアトリビュートとbyAngleアトリビュートを設定します。開始角度と終了角度は，fromAngleアトリビュートとtoAngleアトリビュートで設定します。ここでは，青字で示したようにfromAngleアトリビュートとbyAngleアトリビュートを使用しました。

回転の中心はノードの中心です。もしノードの中心以外の点を回転中心にしたい場合は，ダミーの透明なノードで中心を調節するか，RotateTransitionクラスを使わずに直接Timelineクラスを使用するようにします。

durationアトリビュートやrepeatCountアトリビュートなどはTimelineクラスを使用した時と同じです。補間方法はKeyFrameクラスではtween演算子を使用しましたが，ここではinterpolateアトリビュートで指定します。

最後にアニメーションを開始させるため，play関数をコールします。タイムラインを制御するplay関数などの関数もTimelineクラスと同じです。

次にノードを表示する部分を示します。

Stage {
    title: "Rotate Sample"
    scene: Scene {
        width: 200
        height: 200
        content: [
            node
        ]
    }
}

特に難しい部分は何もありません。単に変数nodeを描画しているだけです。ここでは変数nodeは6つの円としました。

def radian = Math.PI / 180.0;

var node: Node = Group {
    translateX: 100
    translateY: 100
 
    // 6個の円
    content: [
        for (angle in [0..300 step 60]) {
            Circle {
                centerX: 50.0 * Math.cos(angle * radian);
                centerY: -50.0 * Math.sin(angle* radian);
                radius: 35
                fill: Color.PINK
                stroke: Color.RED
            }
        },
        // 重ね順を調節するための半円
        Arc {
            centerX: 50,
            centerY: 0
            radiusX: 35,
            radiusY: 35
            startAngle: 180,
            length: 180
            type: ArcType.OPEN
            fill: Color.PINK
            stroke: Color.RED
        }
    ]
};

最後のArcオブジェクトがないと，最後の円が一番上になってしまいます。そこで，Arcオブジェクトで最初の円の一部を上書きしています。このようにすることで，すべての円が一部隠れるようになります。

実行結果を図1に示します。いつもと同じようにこの図もアプレットページへのリンクになっています。これ以降も実行結果の図はアプレットのページへのリンクになっています。また，スクリプトも記載しておきますので，参考になさってください。