イントロダクション

前回は、こちらのサイトを参考にして「フェード遷移」をやりました。(参考サイトの呼び方)そして今回はその続き「パス遷移」をやります。

「パス遷移」とはPath(線)を引いて、そのパスの端から端まで移動するというものです。参考サイトより画像を引用します。

ちなみにこのPath(クラス)を利用すると文字列をオシャレにデコレーションできます。

こちらのサイトから失敬しました。

そんなわけで、今日は「パス遷移」をやります。

＜ソースコード＞

@Override
public void start(Stage primaryStage) throws Exception {
    Group gp = new Group();
    // チュートリアルにあるコード
    final Rectangle rect = new Rectangle(60, 60);
    rect.setArcHeight(50);
    rect.setArcWidth(50);
    rect.setFill(Color.ORANGE);
    Path path = new Path();
    path.getElements().add(new MoveTo(30,30));
    path.getElements().add(new CubicCurveTo(380, 0, 380, 120, 200, 120));
    path.getElements().add(new CubicCurveTo(0, 120, 0, 240, 380, 240));
    PathTransition pathTransition = new PathTransition();
    pathTransition.setDuration(Duration.millis(10000));
    pathTransition.setPath(path);
    pathTransition.setNode(rect);
    pathTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
    pathTransition.setCycleCount(Timeline.INDEFINITE);
    pathTransition.setAutoReverse(true);
    pathTransition.play();
    // シーンをステージに登録
    gp.getChildren().addAll(rect, path);
    Scene scene = new Scene(gp, 450, 450);
    primaryStage.setScene(scene);
    primaryStage.setTitle("Animation Basic2");
    primaryStage.show();
}

1. 四角形を描き(60 x 60のオレンジ色でちょいと角を丸くする)
2. アニメーションするための線(Path)を描き
3. アニメーションする時間を設定(setDuration())

4. PathTransitionに線(Path)と四角形を登録する※「ORTHOGONAL_TO_TANGENT」の意味はよくわかりませんでした。

5. そしてINDEFINITE「stop()メソッドを呼び出すまで無限に繰り返すアニメーションを指定」
6. オートリバース(自動繰り返し)をTrueで設定(自動で繰り返し動く)

とこんな感じで実装してありました。

でわでわ。。。

[rakuten ids="book:17135078"]