Eclipse Android〜Gluonでアプリを作る10:アニメーションの基本(パラレル遷移)〜

イントロダクション

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

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

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

実装内容

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座標が「50」〜「350」の間を移動します。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:アニメーションの基本(パラレル遷移)〜