torutkのブログ

ソフトウェア・エンジニアのブログ

JavaFXでアナログ時計のアニメーション

JavaFXチュートリアルで海外サイトではよく取り上げられている題材にアナログ時計があります。時計盤の上に短針、長針、秒針を重ね、時間の経過とともにそれぞれの針を動かしていくものです。今回、このアナログ時計のプログラミングをしてみました。

時計盤、短針、長針、秒針をshapeでひとつひとつコードで記述し描画する方法、画像にしておいて重ねて描画する方法、SVGで定義し重ねて描画する方法とが考えられます。

まず、画像を重ねる方法でアナログ時計を作成してみました。詳しい内容は、次のRedmine Wikiに記載しています。残りの方法によるアナログ時計もいずれここに追記する予定です。
JavaFXとアナログ時計 - ソフトウェアエンジニアリング - Torutk

画像を使うとプログラムは簡単に実現できましたが、画像を作るのは絵心とお絵かきツールが必要です。そこで、時計盤や短針、長針、秒針をそれぞれshapeで描画するコードを作成し、そのshapeを画像に出力してそれを使いました。JavaFXにはSceneを画像にする機能(snapshotメソッド)があるので、それを使って画像化し、ImageIOクラスで画像ファイルに保存しました。

SVGを使う方法は、昨年のJavaOne 2013 SFのセッション「'Use the Force, Luke' or Tips and Tricks for Using the Capabilities of JavaFX」(CON2176)で紹介されていた方法です。去年の日記に簡単なレポートを記載しています。
JavaOne 2013 SF(09-23) - torutkの日記

このセッションのスライドは公開されてませんが、セッションの動画が公開されています。
http://www.parleys.com/share.html#play/524fc2d8e4b0c4f11ec5761a

SVG形式でベクターグラフィックスデータを作成するツールはこのセッションでAdobe FireworksIllustrator、Inkspaceの3つを紹介していましたが、Inkspaceは無償なのでこれから始めるのがよさそうです。