アップルデザインのアナログ時計
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にするべきですね。
サイト内関連ページ
アナログ時計を表示する１
アナログ時計を表示する２
LockScreen Clock Hide
Wallpaper JPEGifier
