アップルデザインのアナログ時計

iPhoneの時計アプリを真似てみました。
真似たのはアイコンの方ではなく、世界時計に表示されるアナログ時計の方です。
秒針の根元が楕円なのですが、そこまでは真似ていません。
ハードによって動きが追いつかないことがあったため、ウェブ上やデバイス上などによって動きを変えています。
animationをやめてtransitionのみにしました。(2013/02/26)

ウィジェットサンプル

iPhoneで閲覧している方は、サンプルをダブルタップすると拡大されますので、ウィジェット実行中の雰囲気を味わえるかと思います。

アップルデザイン

アナログ時計

ページトップへ

特徴

作っていくうちに、文字盤の文字に影を付けたのですが、文字と影の間をに秒針レイヤーを配置したので、文字と影の間を秒針が通過して行くのは、デジタルならではの表現かと思います。
針は滑らかに動くようにしましたが、ピタッと止まらず、少し行き過ぎてから戻るという動きを再現してみました。

更新履歴

2013/02/22 基本形完成
2013/02/24 各種ブラウザに対応
2013/02/26 イニシャルリリース
2013/02/27 animationによる動作をやめてtransitionのみに変更

ダウンロード

ダウンロードはこちら ーーー> アップルデザインのアナログ時計(ls_ac_ap.zip)

カスタマイズポイント

3.5インチへの対応

iPhone5は画面が長いため、ロックスクリーン時計を消さなくても、このウィジェットが収まります。
しかし、iPhone4などの3.5インチデバイスでは、従来通りロックスクリーン時計を消し、位置を調整しなければなりません。
ロックスクリーン時計を消すには、LockScreen Clock Hideをご利用ください。
位置調整は、top: 250px;となっている部分が高さの指定部分ですので、この数字を80にして頂くと、一覧表示のスクリーンショットのような表示になります。
height: 1136px;の部分ですが、こちらも画面に合わせて960にするべきですね。

サイト内関連ページ

アナログ時計を表示する1
アナログ時計を表示する2
LockScreen Clock Hide
Wallpaper JPEGifier

ページトップへ

2013/02/26