FX

JavaFX メディアブラウザアプリケーションを起動する NetBeans プロジェクトをダウンロードする

はじめに

このタスクでは、JavaFX のアニメーションクラスを使用して、タイムライン、キーフレーム、および補間器を追加することにより、選択した画像を拡大/縮小します。キーフレームアニメーションは、各キータイムにおけるプロパティーの値を定義し、その間の値を補間することにより、時間の経過に伴う倍率、位置、不透明度などのプロパティーの変化を制御します。

• Timeline は、キーフレームのリストとともに、アニメーションを制御するための機能 (開始、停止、繰り返しなど) を備えたオブジェクトです。
  
  
• KeyFrame は、アニメーションの開始を基準にした特定の時点におけるオブジェクトのさまざまなプロパティー (値) の終了状態の組み合わせとともに、前のフレームを基準にした中間値を計算するための補間の詳細を表します。
  
  
• KeyValue クラスは、アニメーション化するオブジェクトへの参照であるターゲットや、KeyFrame 時間で引き受けるオブジェクトの値、および補間器を定義します。
  
  
• KeyFrame 内の各 KeyValue ごとに、さまざまな KeyFrame 時間で各種の補間タイプを使用できるように、補間のタイプは KeyValue を使用して定義されます。カスタムの補間器を記述することはできますが、数値をアニメーション化するために次のシンプルな補間器が用意されています。
  
  
  • Interpolator.LINEAR - (デフォルト) シンプルな線形の補間器を使用します。
  • Interpolator.EASEOUT - KeyFrame の後に値を序々に変更します。
  • Interpolator.EASIN - KeyFrame に達するにつれて、変更のレートを遅くします。
  • Interpolator.EASEBOTH - KeyFrame 全体で変更のレートをスムーズにします。
  シンプルな KeyFrame を定義するために、簡単な構文が用意されています。
  
  

  at (<time>) {
      <target> => <value> tween <interpolator>;
  }
  

プロジェクトの実行

1. モジュール 2 タスク 1 NetBeans プロジェクトをダウンロードして、NetBeans IDE で開きます。
   
   
2. プロジェクトを実行します。
   
   
3. 写真をクリックすると、ゆっくりと拡大して表示されるのを確認します。
   
   
4. 別の画像をクリックし、その画像が 100% まで拡大するにつれて、最初の画像の倍率がサムネイルに戻る様子を観察します。

ズーム効果は、時間の経過とともに x 軸および y 軸で画像のサイズを変更することにより生成されます。前述のタスクでは、(ImageView のサイズを変更するために必要な) scaleX および scaleY ファクタを変更することにより、サムネイルのサイズがマウスオーバー時に拡大しました。このタスクでは、ズーム効果を完了するために要する 1 秒の 8/10 の間に、異なるスケールファクタを適用します。この効果は、サムネイル画像のズームや画像間の遷移を目的として適用されます。図 1 に、このタスクのアーキテクチャーを示します。

図 1

アニメーションの調査

次の Main.fx からのコードサンプルは、タイムライン、キーフレーム、および補間器オブジェクトを含む zoomInTimeline アニメーションクラスを示しています。

        def zoomInTimeline = Timeline {
            keyFrames: [
                at (0s) {
                    media.scaleX => minPhotoScale tween Interpolator.EASEOUT;
                    media.scaleY => minPhotoScale tween Interpolator.EASEOUT;
                },
                at (0.8s) {
                    media.scaleX => 1 tween Interpolator.EASEIN;
                    media.scaleY => 1 tween Interpolator.EASEIN;
                }
            ]
        };

タイムライン

Timeline (javafx.animation.Timeline) によって、javafx.animation.KeyFrame を使用してキーフレームのシーケンスを確立できます。コードサンプルでは、タイムラインは zoomInTimeline として定義されています。ソースコードを下方向にスクロールすると、zoomOutTimeline が現れますが、これは一方の画像から他方の画像へ遷移するためのアニメーションです。

time インスタンス変数は経過時間を定義し、その値は Timeline オブジェクトの 1 サイクル以内に設定されます。time は、後ろに秒またはミリ秒を表す「s」または「ms」が続く Number の値を取る javafx.lang.Duration クラスの変数です。=> 演算子は、主要値のリストのリテラルコンストラクタを提供します。tween 演算子は、補間値のリテラルコンストラクタです。

タイムラインは、「NetBeans Palette」 > 「Animation」セクションでコードスニペットとして利用できます。コードにタイムラインを追加すると、デフォルトでキーフレームオブジェクトが含まれます。タイムラインを有効にするには、play などの関数を追加します。

キーフレーム

キーフフレームはタイムラインに含まれ、アニメーションの遷移における終了点を定義します (すなわち遷移の終了時に確認することや遷移を終了すべき時刻)。

キーフレームにはキーの値のシーケンスが含まれ、それはターゲット変数が使用する値です。コードサンプルでは、keyFrames は 0 および 0.8 秒に設定されています。キーの値 photo.scaleX および photo.scaleY は、=> 演算子によって作成されます。

このタスクでは、写真のズームは EASEOUT によって 7.5% 大きいサイズに制御され、EASEIN によって画像のフルサイズに制御されます。EASEIN は、デフォルト値を宣言のみの目的で使用します。

アニメーションの 2 つの遷移は次のとおりです。

1. 画像が少しだけ小さめのサイズで始まる開始効果
   
   

   at (0s) {
       media.scaleX => minPhotoScale tween Interpolator.EASEOUT;
       media.scaleY => minPhotoScale tween Interpolator.EASEOUT;
   

   
   
2. 画像が目的の最終サイズで止まる終了効果
   
   

   at (0.8s) {
       // End up just right
       photo.scaleX => 1.0 tween Interpolator.EASEIN;
       photo.scaleY => 1.0 tween Interpolator.EASEIN;
   

試してみましょう

このタスクのタイムラインと補間器を変更してみます。たとえば、EASEIN を使用する代わりに、補間器を LINEAR に変更します。プロジェクトを削除し、構築してから実行します。画像をクリックして、ズームの動作を観察します。その違いはわずかですが、ズームは固定レートで行われ、EASEIN を使用した場合のように滑らかには動かないことがわかります。