分針と時針を加えて時計の完成:iPhoneアプリでアナログ時計を作る



前回、iPhoneアプリのアナログ時計の秒針が、iPhoneのローカル時刻を反映して動くようにしました。あとは、分針と時針を加えて

時計を完成させるだけです。

秒針は、時刻を反映した後、1秒に6度回転する動きをさせれば良かったので私でも考えることができました。しかし、分針と時針は少し頭を使いそうです。自分の脳を鍛えるために考えても良かったのですが、ここは時間節約ということでググりました。
コチラのページ(「YoheiM.NET」)にHTML5でアナログ時計を作成ソースコードが公開されていたので、ここから針を回転させるロジックだけ頂きました。
ソースコードは、以下のようになりました。

前回、時計が表示された直後に、針が現在時刻まで回転する動きが見えてしまうというチョットした問題がありました。
そこで、毎秒動きを更新するonTimerの内容をsetClockメソッドとして外に出し、viewWillAppearメソッドで最初に1度針を回転させておくようにしました。以降は、onTimeroメソッドがsetClockメソッドを繰り返し呼び出すようになります。
これで、見た目には最初からローカル時刻が反映された状態で時計を見ることができます。

回転の中心が分かり易くなるよう、針の絵も変えておきました。ちょっと面倒なのは、絵の大きさや中心点を変えてpngを読み込み直す度に、ソースコードも修正しなければならない点です。Flashだったら、ソースコードはいじらずに、ムービークリップの絵を変えて中心点をズラすだけで済みますからね。



いや〜しかし、自分のiPhoneでアナログ時計が動いているところを見ると、やっとオリジナルのアプリ完成が近づいて来た感じがして感動します。そして、今までにないくらいテンション上がってきました。
次は、午前・午後に合わせて背景の絵を変えたいと思います。