イントロダクション
前回は、こちらのサイトを参考にして「フェード遷移」をやりました。(参考サイトの呼び方)そして今回はその続き「パス遷移」をやります。
「パス遷移」とは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(); }
- 四角形を描き(60 x 60のオレンジ色でちょいと角を丸くする)
- アニメーションするための線(Path)を描き
- アニメーションする時間を設定(setDuration())
-
PathTransitionに線(Path)と四角形を登録する※「ORTHOGONAL_TO_TANGENT」の意味はよくわかりませんでした。
- そしてINDEFINITE「
stop()
メソッドを呼び出すまで無限に繰り返すアニメーションを指定」 - オートリバース(自動繰り返し)をTrueで設定(自動で繰り返し動く)
とこんな感じで実装してありました。
でわでわ。。。
[rakuten ids="book:17135078"]