ついにベールを脱いだJavaFX

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

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

フェードイン,フェードアウト

次に行うのが,透明から出現したり,透明になって消えていくフェードイン,フェードアウトです。ここで使用するのはFadeTransitionクラスです。FadeTransitionクラスもRotateTransitionクラスと同じようにnodeアトリビュートがフェードイン,フェードアウトの対象となります。

リスト4

var fadeTransition = FadeTransition {
    // フェードの対象となるノード
    node: blurredStar
 
    // 不透明度を 0.3 から 1.0 まで変化させる
    fromValue: 0.3
    toValue: 1.0
 
    duration: 0.5s
    repeatCount: Timeline.INDEFINITE
    autoReverse: true
};
fadeTransition.play();

フェードイン,フェードアウトの指定はfromValueアトリビュートとtoValueアトリビュートによって決まります。それぞれ不透明度を表しており,0で透明,1で不透明になります。fromValueアトリビュートの方が値が小さい場合はフェードインになり,大きい場合はフェードアウトになります。

他のアトリビュートはRotateTransitionクラスと同じです。ここでは,フェードイン,フェードアウトを使って星をまばたかせてみました。星をまばたかせるために,まず星形を描画し,その後ろで星形をぼかしたノードに対してフェードイン,フェードアウトを繰り返し行います。

星形を作るにはjavafx.scene.shape.Pathクラスを使用しました。PathクラスはJavaのjava.awt.geom.Path2Dクラスに相当するクラスで任意の直線や曲線を組み合わせてパスを作成します。Path2DクラスがlineToメソッドやcurveToメソッドなどで手続き的にパスを構築するのに対し,PathクラスはLineToクラスやCubicCurveToクラスなどjavafx.scene.shape.PathElementクラスのサブクラスを使用して構造的にパスを構築します。

ぼかしを行うにはNodeクラスのeffectアトリビュートを使用します。effectアトリビュートの型はjavafx.scene.effect.Effectクラスです。Effectクラスのサブクラスにはドロップシャドウを行うDropShadowクラスや,色をセピア調にするSepiaToneクラスなどさまざまなクラスがあります。ぼかしを行うにはGaussianBlueクラスを使用します。

以下に星形と星形をぼかしたノードを作成するスクリプトを示します。

リスト5

// 星の形を表す PathElement
var starElements: PathElement[] = [
    MoveTo { x: 0       y: -50 },
    LineTo { x: 11.803  y: -11.804 },
    LineTo { x: 50      y: -11.804 },
    LineTo { x: 19.098  y: 11.804 },
    LineTo { x: 30.902  y: 50 },
    LineTo { x: 0       y: 26.394 },
    LineTo { x: -30.902 y: 50 },
    LineTo { x: -19.098 y: 11.804 },
    LineTo { x: -50     y: -11.804 },
    LineTo { x: -11.803 y: -11.804 },
    ClosePath {}
];

// 星形
var star: Node = Path {
    translateX: 100
    translateY: 100
    fill: Color.web("#CCCC00")
    stroke: null
    
    elements: starElements
};

// ぼかした星形
var blurredStar: Node = Path {
    translateX: 100
    translateY: 100
    fill: Color.web("#FFFF00")
    stroke: null

    // ぼかしをかける
    effect: GaussianBlur {
        radius: 20
    }

    elements: starElements
};

星形を表すPathElementオブジェクトのシーケンスは,星形と星形のぼかしで同一なので,変数starElementsとして括りだしてあります。

最後に星形と星形のぼかしを描画する部分を示します。

リスト6

Stage {
    title: "Fading Sample"
    scene: Scene {
        width: 200
        height: 200
        fill: LinearGradient {
            startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
            proportional: true
            stops: [
                Stop { offset: 0.0 color: Color.web("#000022") },
                Stop { offset: 1.0 color: Color.web("#000066") }
            ]
        }
 
        content: [blurredStar, star]
    }
}

夜空を表すため,背景はグラデーションで塗っています。

では,このスクリプトを実行してみましょう。まばたいているように見えるでしょうか?

著者プロフィール

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

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