使用しているCSSプロパティの都合上、現在は Google Chrome のみで動作します。
そのため、実用的に使える状況はかなり限られますが、漢心をくすぐりそうなかっこいいメーターを作りました。
今回作ったサンプルはCodeSandboxにあげてあります。
conic-gradient() で作るグラデーション
CSS Images Module Level 4 として検討中の conic-gradient() 。
策定状況は Working Draft となります。
円の中心を回りながら色が変化するグラデーションを作成でき、複数の color stop を定義できます。
今回はこれを使って、
- メーター下部の欠けてるところ
- メーターのトラック
- メーターの開始と終了
を表現しました。
あとは外周を border-radius:100% で円状にして、内側には after 擬似要素をでさらに円を被せて「円環」を実現しました。
tween.js でアニメーションさせる
conic-gradient は CSS でアニメーションさせることができませんので、 Javascript でアニメーションさせました。 使用したライブラリはこちらです。
使用方法はドキュメントやサンプルを参照していただくとして割愛しますが、トゥイーンを実現するための処理を一手に行ってくれて、イージングのパターンも豊富で使いやすいです。
tween.js がメーターの進捗を割り出す元データをイージングさせながらゴリゴリと書き換えてくれるので、これにより CSS がダイナミックに書き換えられていきます。
またこのライブラリは Vue.js のドキュメント でもサンプルとして使われているライブラリです。
今回のサンプルを作るのに Vue.js は必須ではありませんが、コンポーネントとして分割することで、
複雑になる CSS の定義や、 tween.js によるイージングの取り回しなどを隠蔽して、 親コンポーネントからは
<ring-meter :charge="charge"/>
このようにスッキリと呼び出すことができました。 こういった点はコンポーネント化の大きな恩恵だと思います。