7 JavaFXでのアニメーションおよびビジュアル効果
JavaFXを使用して、優れたユーザー操作性を持つアプリケーションを迅速に開発できます。この開始チュートリアルでは、アニメーション化されたオブジェクトを少ないコーディングで作成して複雑な効果を生成する方法について学習します。
図7-1に、作成するアプリケーションを示します。
図7-2に、ColorfulCirclesアプリケーションのシーン・グラフを示します。分岐するノードはGroupクラスのインスタンス化であり、分岐しないノード(リーフ・ノードとも呼ばれる)はRectangleおよびCircleクラスのインスタンス化です。
この開始チュートリアルで使用するツールは、NetBeans IDEです。開始する前に、使用しているNetBeans IDEのバージョンでJavaFX 8がサポートされていることを確認します。詳細は、「Java SE Downloads」ページの「Certified System Configurations」セクションを参照してください。
アプリケーションの設定
次のように、NetBeans IDEでJavaFXプロジェクトを設定します。
-
「ファイル」メニューから、「新規プロジェクト」を選択します。
-
「JavaFX」アプリケーション・カテゴリで、「JavaFXアプリケーション」を選択します。「次」をクリックします。
-
プロジェクトにColorfulCirclesという名前を付け、「終了」をクリックします。
-
NetBeans IDEによって生成されたimport文を削除します。
チュートリアルを進める中で、コード補完機能またはNetBeans IDEの「ソース」メニューの「インポートを修正」コマンドを使用して、import文を生成できます。import文の選択肢がある場合は、
javafxで始まるものを選択します。
プロジェクトの設定
NetBeans IDEによって生成されたソース・ファイルからColorfulCirclesクラスを削除し、例7-1のコードに置き換えます。
例7-1 基本アプリケーション
public class ColorfulCircles extends Application {
@Override
public void start(Stage primaryStage) {
Group root = new Group();
Scene scene = new Scene(root, 800, 600, Color.BLACK);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
ColorfulCirclesアプリケーションでは、グループ・ノードをシーンのルート・ノードとして使用する方法が適切です。グループのサイズは、その中のノードのサイズによって決まります。ただし、ほとんどのアプリケーションでは、ノードによってシーンのサイズを追跡し、ステージがサイズ変更されたときに変更されるようにします。その場合は、「JavaFXでのフォームの作成」の説明に従って、サイズ変更可能なレイアウトのノードをルートとして使用します。
これで、ColorfulCirclesアプリケーションをコンパイルして実行でき、チュートリアルの各手順で中間結果を確認できます。問題が発生した場合は、ダウンロード可能なColorfulCircles.zipファイルに含まれているColorfulCircles.javaファイルのコードを確認してください。この時点では、アプリケーションは単純な黒いウィンドウです。
グラフィックスの追加
次に、例7-2のコードをprimaryStage.show()行の前に追加して、30個の円を作成します。
例7-2 30個の円
Group circles = new Group();
for (int i = 0; i < 30; i++) {
Circle circle = new Circle(150, Color.web("white", 0.05));
circle.setStrokeType(StrokeType.OUTSIDE);
circle.setStroke(Color.web("white", 0.16));
circle.setStrokeWidth(4);
circles.getChildren().add(circle);
}
root.getChildren().add(circles);
このコードでは、circlesという名前のグループが作成され、forループによって30個の円がこのグループに追加されます。各円の半径は150、塗りつぶしの色はwhite、不透明度レベルは5パーセント(ほぼ透明)です。
円の周りに境界線を作成するために、コードにはStrokeTypeクラスが含まれています。描画タイプOUTSIDEは、円の境界が内部から外へStrokeWidth値(ここでは4)の分だけ拡張されることを意味します。描画の色はwhiteであり、不透明度レベルは16であるため、円の色よりも明るくなります。
最後の行では、circlesグループがルート・ノードに追加されます。これは一時的な構造です。後で、図7-2に示されているものと一致するように、このシーン・グラフを変更します。
図7-3に、このアプリケーションを示します。コードで各円の固有の位置を指定していないため、それぞれの円の中心点がウィンドウの左上隅に合せられ、すべての円が重ねて描画されます。重なった円の不透明度と黒い背景との対話により、円は灰色になっています。
ビジュアル効果の追加
続けて、少しぼけて見えるように円にボックスぼかし効果を適用します。例7-3に、コードを示します。このコードをprimaryStage.show()行の前に追加します。
このコードでは、ぼかし半径が幅10ピクセル x 高さ10ピクセル、ぼかしの反復が3に設定され、ほぼガウスぼかしになります。このぼかし技法によって、図7-4に示すように、円のエッジにスムージング効果が生成されます。
背景のグラデーションの作成
ここで、例7-4に示すように、四角形を作成して線形グラデーションで塗りつぶします。
グラデーション四角形が円の背面に表示されるように、コードをroot.getChildren().add(circles)行の前に追加します。
例7-4 線形グラデーション
Rectangle colors = new Rectangle(scene.getWidth(), scene.getHeight(),
new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE, new
Stop[]{
new Stop(0, Color.web("#f8bd55")),
new Stop(0.14, Color.web("#c0fe56")),
new Stop(0.28, Color.web("#5dfbc1")),
new Stop(0.43, Color.web("#64c2f8")),
new Stop(0.57, Color.web("#be4af7")),
new Stop(0.71, Color.web("#ed5fc2")),
new Stop(0.85, Color.web("#ef504c")),
new Stop(1, Color.web("#f2660f")),}));
colors.widthProperty().bind(scene.widthProperty());
colors.heightProperty().bind(scene.heightProperty());
root.getChildren().add(colors);
このコードでは、colorsという名前の四角形が作成されます。この四角形は、シーンと幅および高さが同じであり、左下隅(0, 1)から始まって右上隅(1, 0)で終わる線形グラデーションによって塗りつぶされます。値trueはグラデーションが四角形に比例することを意味し、NO_CYCLEは色のサイクルが繰り返されないことを示します。Stop[]のシーケンスは、特定の場所でグラデーションの色が何であるかを示します。
次の2行のコードでは、四角形の幅と高さをシーンの幅と高さにバインドすることによって、シーンのサイズの変化にあわせて線形グラデーションが調整されるようにします。バインディングの詳細は、「JavaFXのプロパティとバインディングの使用」を参照してください。
最後のコード行では、colors四角形がルート・ノードに追加されます。
図7-5に示すように、エッジがぼかされた灰色の円が虹色の前面に表示されます。
図7-6に、中間段階のシーン・グラフを示します。この時点では、circlesグループおよびcolors四角形はルート・ノードの子です。
ブレンド・モードの適用
次に、円に色を追加し、オーバーレイ・ブレンド効果を追加してシーンを暗くします。circlesグループおよび線形グラデーション四角形をシーン・グラフから削除し、それらを新しいオーバーレイ・ブレンド・グループに追加します。
グループblendModeGroupによって、オーバーレイ・ブレンドの構造が設定されます。このグループには、2つの子が含まれています。最初の子は、新しい(名前のない)黒い四角形と以前に作成したcirclesグループを含む新しい(名前のない) Groupです。2番目の子は、以前に作成したcolors四角形です。
setBlendMode()メソッドによって、オーバーレイ・ブレンドがcolors四角形に適用されます。最後のコード行では、図7-2に示すように、blendModeGroupがシーン・グラフにルート・ノードの子として追加されます。
オーバーレイ・ブレンドは、グラフィック設計アプリケーションで一般的な効果です。そのようなブレンドでは、ブレンドの色に応じて、イメージを暗くすることや強調表示の追加、あるいはその両方を実行できます。この場合には、線形グラデーション四角形がオーバーレイとして使用されます。黒い四角形によって背景は暗いままであり、一方でほぼ透明の円ではグラデーションから色が取得されますが、やはり暗くなります。
図7-7に、結果を示します。次の手順で円をアニメーション化すると、オーバーレイ・ブレンドのすべての効果が表示されます。
アニメーションの追加
最後の手順は、JavaFXアニメーションを使用して円を動かすことです。
-
まだ行っていない場合は、
import static java.lang.Math.random;をimport文のリストに追加します。 -
例7-6のアニメーション・コードを
primaryStage.show()行の前に追加します。例7-6 アニメーション
Timeline timeline = new Timeline(); for (Node circle: circles.getChildren()) { timeline.getKeyFrames().addAll( new KeyFrame(Duration.ZERO, // set start position at 0 new KeyValue(circle.translateXProperty(), random() * 800), new KeyValue(circle.translateYProperty(), random() * 600) ), new KeyFrame(new Duration(40000), // set end position at 40s new KeyValue(circle.translateXProperty(), random() * 800), new KeyValue(circle.translateYProperty(), random() * 600) ) ); } // play 40s of animation timeline.play();
アニメーションはタイムラインによって駆動されるため、このコードでは、タイムラインが作成されてから、forループを使用して2つのキー・フレームが30個の円それぞれに追加されます。0秒にある最初のキー・フレームでは、プロパティtranslateXPropertyおよびtranslateYPropertyが使用され、ウィンドウ内での円のランダムな位置が設定されます。40秒にある2番目のキー・フレームでも同じことが行われます。したがって、タイムラインが再生されると、すべての円が1つのランダムな位置から別のランダムな位置へ40秒間アニメーション化されます。
図7-8に、動いている30個のカラフルな円を示します。これでアプリケーションは完成です。完全なソース・コードについては、ダウンロード可能なColorfulCircles.zipファイルに含まれているColorfulCircles.javaファイルを参照してください。
次に実行すること
次に実行することについて、いくつかの提案を次に示します。
-
JavaFXのサンプルを試します(
http://www.oracle.com/technetwork/java/javase/downloads/の「Java SE Downloads」ページのJDKの「Demos and Samples」セクションからダウンロードできます)。特に、アニメーションおよび効果のサンプル・コードが提供されているEnsembleアプリケーションを見てみます。 -
「JavaFXでの遷移およびタイムライン・アニメーションの作成」を読みます。タイムライン・アニメーションの詳細およびフェード、パス、平行および順次遷移に関する情報があります。
-
リフレクション、ライト、シャドウ効果など、アプリケーションの表示および設計を拡張するその他の方法については、「JavaFXでのビジュアル効果の作成」を参照してください。
-
JavaFX Scene Builderツールを試し、視覚的に興味を引くアプリケーションを作成します。このツールでは、JavaFXアプリケーションのUIを設計するための視覚的なレイアウト環境が提供され、FXMLコードが生成されます。「プロパティ」パネルまたはメニュー・バーの「変更」オプションを使用して、UI要素に効果を追加できます。詳細は、JavaFX Scene Builderユーザーズ・ガイドの「プロパティ」パネルおよびメニュー・バーに関する項を参照してください。
