今日よりちょっと賢い明日、今よりずっと自由な未来

Liberal Arts & IT

IT

htmlとJavaScriptだけでストップウォッチを作る。円で時間表現。

投稿日:

同じ時間を視覚的に測りつずけられるストップウォッチ(カウントダウンタイマー?)があると良いなと思い、簡単に作ってみた。

 Loop Countdown

使った言語はhtmlとCSS、JavaScriptのみ。

仕組みとしては、

  • CSSの@keyframesで一定時間かけて変化する円を用意

  • formで円一周にかかる時間を設定

  • JSで時間を取得して円にかかるCSSを追記

  • ついでに普通のストップウォッチを同時に作動させる

  • Resetボタンが押されたら、円にかかっているクラスを一旦削除して付け直すことで、ストップウォッチは止めずに円の動きだけリセットする

単純に手書きしているだけなので、デベロッパーツールを調べればすぐに分かるけども、円の動かし方でちょっと迷ったのでメモ書き。
円グラフを使った時間の表現。かっこいい円グラフの出し方みたいなアニメーションをつけたかった。棒グラフなら端から順番に色を変えたり、棒の長さを変えるだけなんだけど、円グラフは・・・?

まずはhtmlで円を描くベースを作る。

このdiv要素を円にするCSSがこちら。
縦、横の長さを同じにした上で、border-radiusで丸みをつける。

結論から述べると、上のような円の動かし方をしているCSSはこれだ

元の円はこれ

ここに、pie::beforeをつける。
pie::beforeの動きを赤で表す。

この円は20秒で一周するのだが、pie::beforeの半円は、10秒かけて反転する。最初の10秒間、pie::beforeは紺色で、pieの黄色部分を徐々に露わにする。次の10秒間、pie::beforeは黄色になり、pieの紺色部分を飛び出したpie::beforeが徐々に広がっていく。

Loop Countdownでは、アニメーションの秒数を決めるCSS(今回は10秒と20秒)をJSで計算し、CSSを追記している。

 Loop Countdown(このストップウォッチのデモ)

分かってしまえばなるほどって感じ。
この円の動き、なんて表現すればいいんだろうね。

-IT

Copyright© Liberal Arts & IT , 2021 All Rights Reserved Powered by STINGER.