イントロダクション

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

パラレル遷移は単純に複数のアニメーションを組み合わせてアニメーションするというものでした。

とりあえずは実行結果から

実装内容

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)

でわでわ。。。

関連ページ一覧

1. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫:Label〜
2. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫2:Label〜
3. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫3:Button〜
4. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫4:RadioButton〜
5. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫5:ToggleButton〜
6. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫6:CheckBox〜
7. Eclipse Android〜Gluonでアプリを作る6: アニメーションを作る準備〜
8. Eclipse Android〜Gluonでアプリを作る7: 木琴アプリの解析〜
9. Eclipse Android〜Gluonでアプリを作る8:アニメーションの基本(遷移)〜
10. Eclipse Android〜Gluonでアプリを作る9:アニメーションの基本(パス遷移)〜
11. Eclipse Android〜Gluonでアプリを作る10:アニメーションの基本(パラレル遷移)〜

イントロダクション

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

「パス遷移」とは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"]