l12a

白ウサギを追え

ロボットのコックピットにありそうなかっこいいメーターを作りたい(Google Chromeのみ)

使用しているCSSプロパティの都合上、現在は Google Chrome のみで動作します。
そのため、実用的に使える状況はかなり限られますが、漢心をくすぐりそうなかっこいいメーターを作りました。

f:id:lnly:20190327220754g:plain
SFチックな円環状のメーター
こういったグラフィックは無闇に多用するとストレスとなりますが、ゲームのリワードなど遊び心を演出したい場合などはテンションをあげるのに一役買いそうです。

今回作ったサンプルはCodeSandboxにあげてあります。

Edit Ring Meter

conic-gradient() で作るグラデーション

CSS Images Module Level 4 として検討中の conic-gradient()
策定状況は Working Draft となります。

developer.mozilla.org

円の中心を回りながら色が変化するグラデーションを作成でき、複数の color stop を定義できます。
今回はこれを使って、

  • メーター下部の欠けてるところ
  • メーターのトラック
  • メーターの開始と終了

を表現しました。
あとは外周を border-radius:100% で円状にして、内側には after 擬似要素をでさらに円を被せて「円環」を実現しました。

tween.js でアニメーションさせる

conic-gradient は CSS でアニメーションさせることができませんので、 Javascript でアニメーションさせました。 使用したライブラリはこちらです。

github.com

使用方法はドキュメントやサンプルを参照していただくとして割愛しますが、トゥイーンを実現するための処理を一手に行ってくれて、イージングのパターンも豊富で使いやすいです。
tween.js がメーターの進捗を割り出す元データをイージングさせながらゴリゴリと書き換えてくれるので、これにより CSS がダイナミックに書き換えられていきます。

またこのライブラリは Vue.js のドキュメント でもサンプルとして使われているライブラリです。
今回のサンプルを作るのに Vue.js は必須ではありませんが、コンポーネントとして分割することで、
複雑になる CSS の定義や、 tween.js によるイージングの取り回しなどを隠蔽して、 親コンポーネントからは

<ring-meter :charge="charge"/>

このようにスッキリと呼び出すことができました。 こういった点はコンポーネント化の大きな恩恵だと思います。

おしまい

実用的なものを作るなら Canvas を使って作ることになろうかと思いますが、手軽に作れる CSS も魅力ですよね。