イントロダクション
前回は、こちらのサイトを参考にして「パス遷移」をやりました。(参考サイトの呼び方)そして今回はその続き「パラレル遷移」をやります。
パラレル遷移は単純に複数のアニメーションを組み合わせてアニメーションするというものでした。
とりあえずは実行結果から
実装内容
public void start(Stage primaryStage) throws Exception {
Group gp = new Group();
// チュートリアルにあるコード
final Rectangle rect = new Rectangle(60, 60);
rect.setArcHeight(15);
rect.setArcWidth(15);
rect.setFill(Color.DARKBLUE);
rect.setTranslateX(50);
rect.setTranslateY(75);
FadeTransition fadeTransition =
new FadeTransition(Duration.millis(3000), rect);
fadeTransition.setFromValue(1.0f);
fadeTransition.setToValue(0.3f);
fadeTransition.setCycleCount(2);
fadeTransition.setAutoReverse(true);
TranslateTransition translateTransition =
new TranslateTransition(Duration.millis(2000), rect);
translateTransition.setFromX(50);
translateTransition.setToX(350);
translateTransition.setCycleCount(2);
translateTransition.setAutoReverse(true);
RotateTransition rotateTransition =
new RotateTransition(Duration.millis(3000), rect);
rotateTransition.setByAngle(180f);
rotateTransition.setCycleCount(4);
rotateTransition.setAutoReverse(true);
ScaleTransition scaleTransition =
new ScaleTransition(Duration.millis(2000), rect);
scaleTransition.setToX(2f);
scaleTransition.setToY(2f);
scaleTransition.setCycleCount(2);
scaleTransition.setAutoReverse(true);
ParallelTransition parallelTransition = new ParallelTransition(); parallelTransition.getChildren().addAll(fadeTransition, translateTransition, rotateTransition, scaleTransition );
parallelTransition.setCycleCount(Timeline.INDEFINITE); parallelTransition.play();
// シーンをステージに登録
gp.getChildren().addAll(rect);
Scene scene = new Scene(gp, 450, 450);
primaryStage.setScene(scene);
primaryStage.setTitle("Animation Basic3");
primaryStage.show();
}
今回はチュートリアルをコピペで変数名を多少修正してお終いだったので、まぁ楽でした。今までの実装を行なっていれば「こんな感じ」というのが掴めると思います。
＜ソースの内容＞
final Rectangle rect = new Rectangle(60, 60); rect.setArcHeight(15); rect.setArcWidth(15); rect.setFill(Color.DARKBLUE); rect.setTranslateX(50); rect.setTranslateY(75);
毎度おなじみ、四角形クラス(Rectangle)です。これを縦横60の大きさで作成します。そしてArcHeight, ArcWidthを設定します。(リンクはJavaDocです)
JavaDocの説明は「矩形の4隅にある弧の水平方向の直径を定義します。円弧の幅と円弧の高さの両方のプロパティが0.0より大きい場合にのみ、矩形の角が丸くなります。」とありました。四角形の先っちょが丸くなるんですね(笑)
そしてFill()は色を指定します。setTranslateは位置を指定します。
FadeTransition fadeTransition = new FadeTransition(Duration.millis(3000), rect); fadeTransition.setFromValue(1.0f); fadeTransition.setToValue(0.3f); fadeTransition.setCycleCount(2); fadeTransition.setAutoReverse(true);
これは初めの方に出てきたアニメーションです。色をフェードアウト・インするアニメーションです。
TranslateTransition translateTransition = new TranslateTransition(Duration.millis(2000), rect); translateTransition.setFromX(50); translateTransition.setToX(350); translateTransition.setCycleCount(2); translateTransition.setAutoReverse(true);
TranslateTransitionクラスを使用した、四角形の移動アニメーションです。
X座標が「５０」〜「３５０」の間を移動します。JavaDocの説明は「このアニメーションのサイクル数を定義します。アニメーションを無限に繰り返す場合はcycleCountをINDEFINITEに設定できます、それ以外の場合は0より大きくする必要があります。」です。
そして最後のsetAutoReverseは名前から想像できますね。※動きからも見て取れると思います。
ちょっと余談ですが、「想像できますね」という記載をしましたが、コーディングをするときのメソッド名をつけるとき、変数名をつけるとき、処理の内容が「簡単に想像できる」というのはとても大切なことです。これがわかりづらいと結局ソースの中身を追いかけることになります。
そして、「RotateTransition」「ScaleTransition」は説明を割愛します。
最後のクラスです。
ParallelTransition parallelTransition = new ParallelTransition(); parallelTransition.getChildren().addAll( fadeTransition, translateTransition, rotateTransition, scaleTransition );
本題の「パラレル遷移」クラスです。今まで作成したアニメーションクラスを登録しています。これでアニメーションを複合して実行しています。
最後に。。。
ここまでで、とりあえずはチュートリアルを止めようと思っております。
なぜかというと「じゃんけんゲーム」で必要なアニメーションの作成ができるようになったからです。つまり今回の「パラレル遷移」をじゃんけんゲームで使用します。ちょいとした戦いになりそうですが。。。
追加でやって見た
四角をコインのように回転してみる。
追加で修正した部分は以下の「RotateTransition」の部分です。
RotateTransition rotateTransition = new RotateTransition(Duration.millis(800), rect); rotateTransition.setAxis(new Point3D(0, 10, 0)); rotateTransition.setByAngle(360f); rotateTransition.setInterpolator(Interpolator.TANGENT(Duration.millis(100), 10000.0)); rotateTransition.setCycleCount(RotateTransition.INDEFINITE);
コンストラクタに渡している「Duration」が回転のスピードになります。値が少ないほど回転が早い。
そしてPoint3Dで回転する方向を指定します。今回は横軸(Y軸)方向に回転するのでYの値のみを設定しています。
そして参考サイトはこちら（Java Code Examples)
でわでわ。。。
関連ページ一覧
- JavaFX チュートリアル〜今度こそ、初めてでも大丈夫:Label〜
- JavaFX チュートリアル〜今度こそ、初めてでも大丈夫2:Label〜
- JavaFX チュートリアル〜今度こそ、初めてでも大丈夫3:Button〜
- JavaFX チュートリアル〜今度こそ、初めてでも大丈夫4:RadioButton〜
- JavaFX チュートリアル〜今度こそ、初めてでも大丈夫5:ToggleButton〜
- JavaFX チュートリアル〜今度こそ、初めてでも大丈夫6:CheckBox〜
- Eclipse Android〜Gluonでアプリを作る6: アニメーションを作る準備〜
- Eclipse Android〜Gluonでアプリを作る7: 木琴アプリの解析〜
- Eclipse Android〜Gluonでアプリを作る8:アニメーションの基本(遷移)〜
- Eclipse Android〜Gluonでアプリを作る9:アニメーションの基本(パス遷移)〜
- Eclipse Android〜Gluonでアプリを作る10:アニメーションの基本(パラレル遷移)〜
