ついにベールを脱いだJavaFX

第9回 アニメーションを用いてより魅力的に[応用編]

この記事を読むのに必要な時間:およそ 10.5 分

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

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

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

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

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

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

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

リスト1

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クラスと同じです。

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

リスト2

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

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

リスト3

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

著者プロフィール

櫻庭祐一(さくらばゆういち)

横河電機に勤務するかたわらJava in the Boxにて新しい技術を追い続けています。JavaOneは今年で11年目。名実共にJavaOneフリークと化しています。

コメント

コメントの記入