アニメーション

https://gyazo.com/70fa4078af19d2acf8f5a62eddac321a

プロジェクトの準備

Eclipseで新規にプロジェクトを作成しましょう． メニューから[ファイル]-[新規]-[Javaプロジェクト]をクリックして，「新規Javaプロジェクトの作成」を開きます． ここでは，プロジェクト名に”Project12”を入力ます． また，JREは"プロジェクト固有のJREを使用“を選択します． 最後に，[完了]をクリックしましょう．

https://gyazo.com/3a9a83ab3c9adbf4a8d9b93116b6e25a

Applicationクラスを継承したMyApplicationクラスを作成しましょう． メニューから[ファイル]-[新規]-[クラス]をクリックして，「新規Javaクラス」を開きます． まず，名前に”MyApplication”を入力します． 次にスーパークラスを設定するために，[参照]ボタンから「スーパークラスの選択」を開き， 一致する項目からjavafx.application.Applicationを選択して，[OK]をクリックします． 最後に[完了]をクリックしましょう．

https://gyazo.com/9bae89257cfbf390807eb9ee034e965f

Applicationクラスの抽象メソッドであるstartメソッドをオーバーライドしておきます． 下記コードを参考に，タイトルをProject 12，幅を800px，高さを500pxに設定しましょう． プログラムの実行後にウィンドウが表示されることを確認してください．

https://gyazo.com/7347594439ac7f995ccac0434fd06666

プログラム実行時の注意

JavaFXはmainメソッドがなくともプログラムの実行が可能という特徴を持っています． しかし，Eclipseの現バージョンでは未対応のため，下記のコードをMyApplicationクラスに記述する必要があります． プログラム実行の前に，必ず下記のコードをソースコードに挿入してください．

イメージの描画

今回はイメージをキャンバスに描画し，パラパラ漫画の要領でアニメーションさせることに挑戦していきましょう． 前準備として，下記のコードを参考にCanvasクラスをウィンドウに配置してください． レイアウトペインとしてVBoxクラスを利用しています． プログラムの実行後に表示されるウィンドウを確認してください．

https://gyazo.com/42657f7d3817d0230814105a05b36408

まずは，下記の「歩いている女性のイメージ（png画像）」をキャンバスに表示してみます． この２つのイメージを交互に表示することで歩いている様子の表現が可能です． walking1.pngとwalking2.pngをダウンロードしたら， プロジェクトのsrcフォルダにコピーしてください．

https://gyazo.com/7ffff99915b604b6ec050953c76c20a9 https://gyazo.com/1f35ae1f421c9c84f6e8dcf22af42756

保存したイメージを読み込むには，下記のようにImageクラスを利用します （Imageクラスのコンストラクタの引数には，画像ファイルの位置を表すURLを指定します）． ここでは，２つのイメージを利用するため，Imageクラスの配列walkingを宣言して， walking[0]にwalking1.png，walking[1]にwalking2.pngをそれぞれ読み込みます．

Image walking[] = new Image[2];
walking[0] = new Image(this.getClass().getResource("walking1.png").toString());
walking[1] = new Image(this.getClass().getResource("walking2.png").toString());

キャンバスにイメージを表示するには，GraphicsContextクラスのdrawImage()メソッドを利用します． drawImage()メソッドの３つの引数は，表示するイメージ，X座標，Y座標を表しています．

gc.drawImage(walking[0], 0, 0);

下記のコードを参考に，新たにpaint()メソッドを定義して，walking1.pngの画像を表示してください． プログラムの実行後に表示されるウィンドウを確認してください．

https://gyazo.com/a372744616de3780b82ddad8794a8ece

アニメーションの描画

時間軸に沿ってイメージをアニメーションするにはTimelineクラスを利用します． まずは，Timelineクラスのコンストラクタの引数にKeyFrameクラスを渡します． このKeyFrameクラスには，アニメーションの1サイクルの時間(ミリ秒)と， ラムダ式を利用してサイクル毎に実行するメソッド（handle() メソッド）を指定します． 次に，setCycleCount()メソッドで「実行するサイクル数」を指定します． 引数にTimeline.INDEFINITEを指定すると無限に繰り返すことを意味します． 最後に，**play()**メソッドでアニメーションが開始されます．

Timline timer = new Timeline(new KeyFrame(Duration.millis(500), event -> handle()));
timer.setCycleCount(Timeline.INDEFINITE);
timer.play();

下記のコードを参考に，walking1.pngとwalking2.pngを交互に表示するアニメーションを作成してください． アニメーションのサイクル数を把握するために，int型の変数timeを宣言しています． このtimeを２で割った余りを配列番号に指定することで，0，1，0，1という繰り返しを実現していることに注意してください． プログラムの実行後に表示されるウィンドウを確認してください．

下記のコードを参考に，イメージが右に移動するアニメーションを作成してください． イメージのX座標を表すint型の変数xを宣言し，サイクル毎に50ずつ値を増加させています． プログラムの実行後に表示されるウィンドウを確認してください．

https://gyazo.com/6931a5d5e06b914e114417e980d31980

https://gyazo.com/97a14bcaa5211b200c47a0fd28ed0a3b

課題

下記の「走っている男性のイメージ（png画像）」をキャンバスに表示させてください． イメージは右から表示し，歩いている女性よりも速く移動させましょう． running1.pngとrunning2.pngをダウンロードしたら， Eclipseのプロジェクトsrcフォルダにコピーしてください． 課題が完成したら，作成したプロジェクトを実行可能JARファイルの形式でファイルに保存（エクスポート）してください．

https://gyazo.com/ec41bbd7f3ab1f428d60e6c8bfcaf3dd https://gyazo.com/144f28d86601e53ca9e833082c02f865

https://gyazo.com/ded0672060682642fbc4b1769441e34f

愛知県名古屋市にある椙山女学園大学 文化情報学部 向研究室の公式サイトです． 専門は情報科学であり，人工知能やデータベースなどの技術要素を指導しています． この公式サイトでは，授業で使用している教材を公開すると共に， ベールに包まれた女子大教員のミステリアスな日常を４コマ漫画でお伝えしていきます． サイトに関するご意見やご質問はFacebookまたはTwitterでお問い合わせください．