2012-06-08

TOM SCHINDLさんのエントリーHaving fun with SVG and JavaFX 2.0が面白かったのでこれと同じような事をNetBeansでやってみたいとおもいます。
TOM SCHINDLさんは開発者でもありe(fx)clipseを使ってSVGファイルをfxmlファイルに変換しています。
私がInkscapeを使って作ったSVGファイルがe(fx)clipseの変換機能でfxmlファイルに変換できなかったためScene Builderでfxmlファイルを作成しました。
TOM SCHINDLさんのエントリーHaving fun with SVG and JavaFX 2.0にあるコードを実行すると以下のようなアニメーションになります。

1. まずScene Builderでfxmlファイルを作成
　土台のAnchorPaneは最初から用意されます。
　使うのはText, Circle, wrapに使うAnchorPaneです。
　LibraryよりTextなど必要な物を土台のAnchorPaneへDrag&Dropして配置します。
　Textは72pxで"Net"と"Beans"に分けて作成。
　右側のPropertiesでpxの変更ができます。
　fxのロゴの部分は２つのサークルとTextの"fx"で作ります。
　サークルは右側のPropertiesでstrokeの色の変更やeffectの選択ができます。
　このロゴ部分はAnchorPaneでwrapします。（Groupを使ってもいいです。）
　カーソルで囲って選択してからArrangeメニューのWrap in => AnchorPaneを選択。

　Scene Builderで保存するとfxmlファイルが作成されます。
　以下のファイルが出来上がります。
net_fx_beans.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?>

<AnchorPane fx:id="AnchorPane0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="691.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <Text id="text1" fx:id="text_net" layoutX="115.0" layoutY="230.0" stroke="BLACK" text="Net">
      <font>
        <Font name="System Bold" size="72.0" fx:id="x1" />
      </font>
    </Text>
    <AnchorPane id="AnchorPane" fx:id="fx_anchorpane" layoutX="231.0" layoutY="120.0" prefHeight="162.609375" prefWidth="162.609375">
      <children>
        <Circle id="circle1" fill="DODGERBLUE" layoutX="82.0" layoutY="82.0" opacity="0.5" radius="71.3046875" stroke="#33e7ff" strokeType="INSIDE">
          <effect>
            <GaussianBlur />
          </effect>
        </Circle>
        <Circle id="circle2" fill="DODGERBLUE" layoutX="83.0" layoutY="83.0" radius="48.70703125" stroke="#00e0ff" strokeType="INSIDE">
          <effect>
            <BoxBlur />
          </effect>
        </Circle>
        <Text id="text2" layoutX="46.0" layoutY="109.0" stroke="BLACK" text="fx">
          <font>
            <Font name="System Italic" size="72.0" />
          </font>
        </Text>
      </children>
    </AnchorPane>
    <Text id="text3" fx:id="text_beans" font="$x1" layoutX="384.0" layoutY="230.0" stroke="BLACK" text="Beans" />
  </children>
</AnchorPane>

2. LogoAnimation.javaは以下のようになります。

import javafx.animation.Animation;
import javafx.animation.FadeTransition;
import javafx.animation.ParallelTransition;
import javafx.animation.ScaleTransition;
import javafx.animation.SequentialTransition;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.layout.AnchorPane;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Text;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.util.Duration;

public class LogoAnimation extends Application {

	public static void main(String[] args) {
		Application.launch(args);
	}

	@Override
	public void start(Stage primaryStage) throws Exception {
		AnchorPane g = (AnchorPane)FXMLLoader.load(LogoAnimation.class.getResource("net_fx_beans.fxml"));
		System.out.println(" g : " + g);
		
		Text text1 = (Text) g.lookup("#text1");
		System.out.println(" text1 : " + text1);
		text1.setTranslateX(71);
		
		Text text2 = (Text) g.lookup("#text3");
		System.out.println(" text2 : " + text2);
		text2.setTranslateX(-71);

		AnchorPane logo = (AnchorPane) g.lookup("#AnchorPane");
		System.out.println(" logo : " + logo);
		logo.setOpacity(0);
		
		TranslateTransition tt0 = new TranslateTransition(new Duration(3000), text1);
		tt0.setFromX(71);
		tt0.setToX(0);

		TranslateTransition tt = new TranslateTransition(new Duration(3000), text2);
		tt.setFromX(-71);
		tt.setToX(0);

		FadeTransition ft = new FadeTransition(new Duration(2000), logo);
		ft.setFromValue(0);
		ft.setToValue(1.0);

		ScaleTransition st = new ScaleTransition(new Duration(2000),logo);
		st.setFromX(0);
		st.setToX(1);

		SequentialTransition t = new SequentialTransition(new ParallelTransition(tt0, tt), new ParallelTransition(ft,st));
		t.setDelay(new Duration(2000));
		t.setAutoReverse(true);
		t.setCycleCount(Animation.INDEFINITE);
		t.play();



		StackPane p = new StackPane();
		p.getChildren().add(g);

		Scene s = new Scene(p);
		s.setFill(Color.TRANSPARENT);

		primaryStage.initStyle(StageStyle.TRANSPARENT);
		primaryStage.setWidth(657);
		primaryStage.setHeight(237);
		primaryStage.setScene(s);
		primaryStage.show();
	}

}

3. 実行すると以下のようなアニメーションになります。

Onto JavaFX

Net(fx)Beans