JavaFXのアニメーション機能 (5/5)
作成:2015-04-18 09:05
更新:2015-04-18 09:05
更新:2015-04-18 09:05
■Timelineでアニメーションを表示する
作成したTimelineには、アニメーションに関する様々な設定のためのメソッドが用意されています。それらを使って、必要な情報を組み立てていきます。主なメソッドを以下にまとめておきましょう。
●オートリバースの設定
アニメーションを往復再生するものです。trueにするとオートリバースします。
●再生回数の設定
アニメーションの再生回数を整数で指定します。
●KeyFrameを管理するListの取得
Timelineに設定されているKeyFrameは、List（ObservableList）インスタンスにまとめられ、Timelineに保管されています。このListを取得するのがgetKeyFramesです。
●KeyFrameの追加
TimelineにKeyFrameを組み込むには、getKeyFramesで取得したListに「add」メソッドで追加をします。これでKeyFrameが組み込まれます。
――では、実際にTimelineを使ってアニメーションをするサンプルを挙げておきましょう。下に、createShapeメソッドを書き換えるサンプルを挙げておきました。これを実行すると、四角形の色が赤～青の間で変化しながら横幅が伸び縮みします。
ここでは、Rectangleの横幅のプロパティを得るのに「widthProperty」というメソッドを使っています。これは「DoubleProperty」という、double値のプロパティを取り出します。
また塗りつぶしの色を得るのに「fillProperty」というメソッドを使っていますね。これは「ColorProperty」というColorを値とするPropertyです。引数には、Colorクラスの「rgb」というメソッドを使い、RGB各輝度を引数指定して色を用意しています。
Timelineを使いこなせるようになれば、さまざまなプロパティの値を自由に操作して動かせるようになります。Nodeにどんな操作可能なプロパティがあるか、調べてみると面白いでしょう。
●オートリバースの設定
《Timeline》.setAutoReverse(《boolean》);アニメーションを往復再生するものです。trueにするとオートリバースします。
●再生回数の設定
《Timeline》.setCycleCount(《int》);アニメーションの再生回数を整数で指定します。
●KeyFrameを管理するListの取得
《Timeline》.getKeyFrames();Timelineに設定されているKeyFrameは、List（ObservableList）インスタンスにまとめられ、Timelineに保管されています。このListを取得するのがgetKeyFramesです。
●KeyFrameの追加
《ObservableList》.add(《KeyFrame》);
TimelineにKeyFrameを組み込むには、getKeyFramesで取得したListに「add」メソッドで追加をします。これでKeyFrameが組み込まれます。
――では、実際にTimelineを使ってアニメーションをするサンプルを挙げておきましょう。下に、createShapeメソッドを書き換えるサンプルを挙げておきました。これを実行すると、四角形の色が赤～青の間で変化しながら横幅が伸び縮みします。
ここでは、Rectangleの横幅のプロパティを得るのに「widthProperty」というメソッドを使っています。これは「DoubleProperty」という、double値のプロパティを取り出します。
また塗りつぶしの色を得るのに「fillProperty」というメソッドを使っていますね。これは「ColorProperty」というColorを値とするPropertyです。引数には、Colorクラスの「rgb」というメソッドを使い、RGB各輝度を引数指定して色を用意しています。
Timelineを使いこなせるようになれば、さまざまなプロパティの値を自由に操作して動かせるようになります。Nodeにどんな操作可能なプロパティがあるか、調べてみると面白いでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
// import javafx.animation.*;
// import javafx.util.Duration;
public void createShape(Pane root){
Rectangle r = new Rectangle(20, 20, 100, 50);
r.setFill(Color.CYAN);
root.getChildren().add(r);
Timeline tl = new Timeline();
tl.setAutoReverse(true);
tl.setCycleCount(10);
// 横幅操作のKeyFrame作成
KeyFrame key_a1 = new KeyFrame(
new Duration(0),
new KeyValue(r.widthProperty(),100));
KeyFrame key_a2 = new KeyFrame(
new Duration(2500),
new KeyValue(r.widthProperty(),200));
// 塗りつぶし色操作のKeyFrame作成
KeyFrame key_b1 = new KeyFrame(
new Duration(0),
new KeyValue(r.fillProperty(),Color.rgb(255, 0, 0)));
KeyFrame key_b2 = new KeyFrame(
new Duration(2500),
new KeyValue(r.fillProperty(),Color.rgb(0, 0, 255)));
tl.getKeyFrames().add(key_a1);
tl.getKeyFrames().add(key_a2);
tl.getKeyFrames().add(key_b1);
tl.getKeyFrames().add(key_b2);
tl.play();
}
※関連コンテンツ