JavaFXのエフェクト-クイックスタート

今回は、JavaFXの効果についてお話します。

奇妙なことに、JavaFXの効果は簡単です:)

（注意、イラスト）



まず、空白を作成します。空白は後でモックします。

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;

Stage {
title : " Effects "
scene : Scene {
width : 250
height : 80
content : [
Circle {
translateX : 40
translateY : 40
radius : 15
fill : Color.RED
}
]
}
}


このコードを実行すると、赤い丸の付いたシンプルなウィンドウが表示されます。驚くべきことではありませんが、他に何も表示されないはずです。



次に、単純な効果、たとえばガウスぼかしを適用してみましょう。

package tiny;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.effect.GaussianBlur;

Stage {
title : " Effects "
scene : Scene {
width : 250
height : 80
content : [
Circle {

effect : GaussianBlur {
radius : 9
}

translateX : 40
translateY : 40
radius : 15
fill : Color.RED
}
]
}
}


実行すると、ぼやけた円が表示されます。 ご覧のとおり、3行しか追加していないため、簡単にぼやけてしまいます。



タスクを複雑にしましょう。 多くの要素に効果を適用したい場合はどうしますか？ 次に、2つの方法があります。
まず、各要素の効果をいつでも指定できます。 第二に、要素をいつでもグループに組み合わせて、個々の要素ではなく、グループに効果を適用できます。

package tiny;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.Group;
import javafx.scene.control.Button;

Stage {
title : " Effects "
scene : Scene {
width : 250
height : 80
content : [
Group {
effect : GaussianBlur {
radius : 5
}

content : [
Circle {
translateX : 40
translateY : 40
radius : 15
fill : Color.RED
} ,
Button {
translateX : 5
translateY : 15
text : " Click me "
}

]
}
]
}
}


実行すると、ぼやけた円と動作するぼやけたボタンが得られます。



それでは、いくつかのダイナミクスを追加しましょう。 JavaFXは、時間の経過とともに発生するプロセスを管理するための特別なツールであるタイムラインを提供します。

時間の経過とともにぼかし効果の滑らかな変化を達成してみましょう。

値が時間とともに変化するblurRadius変数を追加します。

var blurRadius : Number = 0 ;


タイムラインを作成します。

Timeline {
repeatCount : Timeline.INDEFINITE
autoReverse : true

keyFrames : [
KeyFrame {
time : 1s
values :
blurRadius = > 9 tween Interpolator.LINEAR
}
]
} .play();


ここでは、タイムラインが「永久に」実行されると判断します。 autoReverseを使用すると、アニメーションの終了後にスクロールバックできます 。
次に、参照ポイント、またはむしろ参照フレームを定義します。 したがって、1秒でblurRadius変数の値が9に等しくなり、時間の経過とともに変数がこの値に線形に近づく必要があると判断します。

ぼかし効果をblurRadius変数にバインドします。

effect : bind GaussianBlur {
radius : blurRadius
}


それで終わりです。すべてを統合し、タイムラインを開始することを忘れないでください（.play（）メソッドを呼び出して）。

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.Group;
import javafx.scene.control.Button;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;

var blurRadius : Number = 0 ;

Stage {
title : " Effects "
scene : Scene {
width : 250
height : 80
content : [
Group {
effect : bind GaussianBlur {
radius : blurRadius
}

content : [
Circle {
translateX : 40
translateY : 40
radius : 15
fill : Color.RED
} ,
Button {
translateX : 5
translateY : 15
text : " Click me "
}

]
}
]
}
} ;

Timeline {
repeatCount : Timeline.INDEFINITE
autoReverse : true

keyFrames : [
KeyFrame {
time : 1s
values :
blurRadius = > 9 tween Interpolator.LINEAR
}
]
} .play();


このコードを実行すると、アニメーション化されたウィンドウが表示されます。


しかし、私たちはガウスに何を付けていますか？ 他のことを試してみましょう。

package tiny;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.Group;
import javafx.scene.control.Button;
import javafx.scene.effect.Reflection;

Stage {
title : " Effects "
scene : Scene {
width : 200
height : 100
content : [
Group {
effect : Reflection {
fraction : 0 . 75
topOffset : 0 . 0
topOpacity : 0 . 5
bottomOpacity : 0 . 0
}

content : [
Circle {
translateX : 40
translateY : 40
radius : 15
fill : Color.RED
} ,
Button {
translateX : 5
translateY : 15
text : " Click me "
}

]
}
]
}
} ;


また、JavaFXには、グロー、ディストーション、グロー、シャドウなどの効果など、さらにいくつかの効果があります。


これで、JavaFXのエフェクトに関する大まかな話は終わりました。

がんばって。

Cg。