HatenaPocketJavaFXには既にアニメーションが実装できる機能が用意されています。今回は、このアニメーション系クラスの利用方法を見ていきたいと思います。複数のアニメーションを同時実行アニメーションクラスを利用する場合に気を付けること今回のベースプログラムはこちらを利用します。サンプルではViewクラスを修正し、結果を見ていきます。・setCycleCount(ループ回数)でアニメーションの繰り返し回数を指定できます。・setAutoReverse(有効かどうか)でアニメーションが終了した後反対の処理を実行するかどうかを設定できます。フェードインアニメーションを設定した場合、終了後にフェードアウトアニメーションが始まります。この反転アニメーションもCycleCount一回分の扱いになるようです。・playメソッドを呼び出すとアニメーションを開始します。・pauseメソッドを呼び出すとアニメーションを一時停止します。・stopメソッドを呼び出すとアニメーションを停止します。・Durationクラスはアニメーションの実行期間を表すクラスとして利用します。1秒でDurationオブジェクトを作成し、アニメーションクラスに渡した場合はそのアニメーションは1秒で完了するように実行されます。Durationのインスタンス化は通常staticメソッドを使用するほうが良いでしょう。Duration.millis(ミリ秒)でミリ秒指定のDurationオブジェクトの取得が可能。Duration.seconds(秒)で秒指定のDurationオブジェクトの取得が可能。Duration.minutes(分)で分指定のDurationオブジェクトの取得が可能。Duration.hours(時)で時指定のDurationオブジェクトの取得が可能。平行移動アニメーションTranslateTransitionを利用することで平行移動アニメーションを実装できます。内部では単純にx,y座標を加算したりするだけですね。一応3Dようにz座標の変更処理も入れられるようになっています。アニメーションScaleTransitionを利用することで拡大縮小アニメーションを実装できます。拡大倍率をメソッドの引数に指定します。setFromX(開始X倍率)setFromY(開始Y倍率)setFromZ(開始Z倍率)setToX(終了X倍率)setToY(終了Y倍率)setToZ(終了Z倍率)サンプルでは縦幅を最大5倍、横幅を最大7倍にしました。回転アニメーションRotateTransitionを利用することで回転アニメーションを実装できます。setFromAngle(開始角度)setToAngle(終了角度)で指定しましょう。rect);animation.setFromAngle(0);animation.setToAngle(360);animation.setCycleCount(2);animation.setAutoReverse(true);animation.play();getChildren().add(rect);}}実行結果パス移動アニメーションPathTransitionを利用すると作成したパスの通りに移動するアニメーションを実装できます。setPath(Shapeオブジェクト)でPathオブジェクトを指定してください。setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT)と指定すると、オブジェクトの回転角度をパスの進行方向に傾けることができます。引数がShapeオブジェクトであるため、Rectangleクラスなどのオブジェクトも指定できます。animation.setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT);animation.setPath(path);animation.setCycleCount(2);animation.setAutoReverse(true);animation.play();getChildren().add(rect);}}実行結果フェードアニメーションFadeTransitionクラスを利用することでNodeオブジェクトのopacity値を変更するアニメーションを実装できます。ゲーム制作で画面遷移するときに暗転アニメーションを挟みたいときに使えそうですね。線の色を変更するアニメーションStrokeTransitionを利用すると線の色を変更できるアニメーションが実装できます。setFromValue(開始Colorオブジェクト)setToValue(終了Colorオブジェクト)と指定します。塗りつぶし色変更アニメーションFillTransitionを利用すると塗りつぶしの色を変更できるアニメーションが実装できます。setFromValue(開始Colorオブジェクト)setToValue(終了Colorオブジェクト)と指定します。汎用アニメーションTimelineを利用すると汎用的なアニメーション処理を実装できます。その代わり少々手間がかかります。Timelineの引数KeyFrameはKeyValueとアニメーションの実行間隔を指定します。KeyValueはオブジェクトのどの値を変更するのか、と実行間隔ごとの最終値を指定します。その内容に応じたアニメーションが実行されるわけです。扱う値が数値の場合は自動的に補完アルゴリズムが適用され、アニメーション処理を実行できます。ない場合はInterpolatableインターフェースの内容によって補完処理を実行します。値がInterpolatableを実装しない場合は離散補間が利用されます。補間アルゴリズムはInterpolatorクラスを指定して変更することもできます。粗削りな方法ですが、ここではInterpolatableを実装してメッセージアニメーションを実装できるように定義してみました。オリジナルアニメーション作成の参考になれば良いのですが。Timeline(kf);animation.setCycleCount(2);animation.setAutoReverse(true);animation.play();getChildren().add(text);}}実行結果KeyValueクラスはWritableValueと変更対象の値を引数に受け取るため、オリジナルのWritableValueを作成し、TextノードのtextPropertyをラップできるクラス、AnimationStringを作成しました。値にはStringをラップしたAnimationString.Valueを定義します。補間処理にはInterpolatableを実装しておき、interpolateの引数tを利用し、その割合に応じて文字列を切り出す処理を実装しています。Textオブジェクトの初期テキスト値は無視されますので設定する必要はありません。順番にアニメーション処理を実行SequentialTransitionクラスを使用することで順番にアニメーションを実行することができます。SequentialTransition(animationオブジェクト...)で複数指定しましょう。animation2);animation.setCycleCount(2);animation.setAutoReverse(true);animation.play();getChildren().add(rect);}}実行結果アニメーションの同時実行ParallelTransitionを利用すると複数のアニメーションを同時に実行できます。ParallelTransition(animationオブジェクト...)で複数指定しましょう。animation2);animation.setCycleCount(2);animation.setAutoReverse(true);animation.play();getChildren().add(rect);}}実行結果アニメーションクラスを利用する場合に気を付けることアニメーションクラスを利用する場合は下記の記事で紹介したことも考慮して使用したほうがいいです。本稿では、JavaFXでグラデーションの実装方法について確認します。本稿ではJavaFXでゲームループを実装する方法を紹介します。コメントをキャンセルメールアドレスが公開されることはありません。当サイトのプライバシーポリシーについてはこちらからご参照いただけます。