TimeCrowdのロゴを時計のように時刻に合わせて動かす

先日公開した以下の記事に引き続き、TimeCrowdのロゴの亀（公式な名前はまだない）を動かすシリーズです。

https://timecrowd.net/blog/logo-guruguru/

こんにちは。エンジニアの飛岡です。以前、デザイナーの田中さんがタイムクラウドのロゴをアニメーションさせていたことがありました。かわいい。今回、ブログのネタに困ったので、この時計の針の部分をぐるぐる回せるようにすることにしました。HTML内にインライン...

前回は、スライダーでぐるぐる回しましたが、今回は時計のように回してみました。

実装はとてもシンプルで、以下のように現在の日時から角度を計算して回転させているだけです。

var base = {
  long: 53, 
  short: -65
}

function rotateShort(angle) {
  short.setAttribute('transform', 'rotate(' + (base.short + angle) + ',227.14,257.8)')
}

function rotateLong(angle) {
  long.setAttribute('transform', 'rotate(' + (base.long + angle) + ',227.14,257.8)')
}

function rotate(h, m) {
  rotateShort((h * 60 + m) * 0.5)
  rotateLong(m * 6)
}

baseというのは元々のロゴの状態から、12時0分の状態に回転させるための角度です。
あと、脚が動く速度を秒に合うように変えました。（3秒→4秒に）

結果はこうなりました。

以下のリンクから実際に動かすことができます。

tc-logo-clock

フォントとか残念な感じですが、もし会社のサービスとして時計を提供することになったら、もっとオシャレな感じにデザインされると思います！

短いですが、今回はここまで。