機械仕掛けのアナログ時計

ずっと再現したかった時計です。
今はもう動かないのですが、２０年前に入手してからずっと気に入っている懐中時計があるのです。
時計に対する意識はこれ以上のものはないので、私が作る時計ウィジェットの集大成かもしれません。
でも、デザインセンスは無いので、見た目の追求はほどほどで・・・

ウィジェットサンプル

iPhoneで閲覧している方は、サンプルをダブルタップすると拡大されますので、ウィジェット実行中の雰囲気を味わえるかと思います。
iPhoneのブラウザでは、思ったよりも広告の読み込みが負担になっているらしく、スムーズに動かないので、パソコンのブラウザで確認して下さい。
OSXのSafariとChromeでは確認してありますが、ダウンロードしたファイルをiFileなどのファイラーを使うことでiPhoneでも確認できます。

特徴

できるだけリアルな動きにしましたが、リアルすぎると動きが分からないため、歯車の歯数やモジュールなどをいろいろ変更しました。
これにより、４番車の１秒周期を変更せずに、アンクルやテンプの動きが分かるスピードにできました。
専門家様からするとツッコミ所満載かと思いますが、知らない人が見る限りでは、多少なりとも機械時計の何たるかを知ることができるかと思います。
機械部分をボカしたことで、ガラスの向こうにあるように見えます。
ソースの汚さも、手作りの現れということで・・・

更新履歴

2013/05/28　インボリュート曲線の描画完了
2013/06/15　歯車の描画完了
2013/06/17　サイクロイド曲線への変更断念
2013/06/19　歯車列の描画完了
2013/06/22　ガンギ車の描画完了
2013/06/25　アンクルの描画完了
2013/06/27　ガンギ車とアンクルのタイミング合わせ完了
2013/06/29　歯車描画の引数にモジュールを追加し、輪列を変更
2013/07/04　アンクルが１秒周期になるように、輪列の歯数を変更
2013/07/05　基本形完成
2013/07/06　transitionによる輪列動作をanimationに変更
2013/07/07　setTimeoutによる制御をrequestAnimationFrameではなくsetIntervalに変更
2013/07/10　テンプの描画完了
2013/07/12　動力ゼンマイの描画完了
2013/07/14　アニメーションのフレーム書き出しを0.5秒毎に変更
2013/07/16　各種ブラウザ対応を見送り
2013/07/18　イニシャルリリース

ダウンロード

ダウンロードはこちら　ーーー＞　機械仕掛けのアナログ時計（ls_skeleton_watch.zip）

カスタマイズポイント

3.5インチへの対応

iPhone5は画面が長いため、ロックスクリーン時計を消さなくても、このウィジェットが収まります。
しかし、iPhone4などの3.5インチデバイスでは、従来通りロックスクリーン時計を消し、位置を調整しなければなりません。
ロックスクリーン時計を消すには、LockScreen Clock Hideをご利用ください。
位置調整ですが、今回は作り込みの流れによって、２カ所の変更になります。
時刻表示部分は、top: 250px;となっている部分を80にして下さい。
機械部分は、#blur内のtop: 0px;となっている部分を-170にして下さい。
height: 1136px;の部分ですが、こちらも画面に合わせて960にしておきましょう。
なお、iPhone4をiOS7にしたため、3.5インチでの動作確認はできておりません。

ぼかしの変更

今回の見所である機械部分ですが、ガラスケースに入っているように見せるため、２ピクセルボカしています。
これにより、動力ゼンマイ部分もメタル感が出ています。
-webkit-filter: blur(2px);としているのですが、この数字を増やすともっとぼけるので、雰囲気を出したい場合は、５ピクセル程度まで増やしても良いかと思います。
機械動作を見たい場合は、０にして頂ければクッキリしますので、お楽しみ頂けるかと思います。
その際は、３本指タップでズームすると面白いのではないでしょうか。

サイト内関連ページ

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