ブロックチェーン・AI・システム開発の株式会社INDETAIL

cssとsvgで、円グラフをモーショングラフィックス風に見せる方法

2019.01.15
nanba

年代平均年齢32.3歳

  • ~20代前半
    19
  • 20代後半~30代前半
    44
  • 30代後半~
    40代前半
    29
  • 40代
    後半~
    8

※ INDETAIL社員年齢グラフです

こんにちは、nanbaです。
今回のテーマはコーポレートサイトなどでよく見かける『円グラフ』の表示です。
通常であれば画像対応だったり、jsライブラリなどを使用して表示することが多いと思いますが、上記グラフは私の専門分野であるチカラワザcssアニメーションです。
※ 上記グラフのアニメーションを見逃した方はお手数ですがリロードしてみてください

絵画はsvg

ソースコードは下記

要は4色の円svgをcssで重ねているというだけです。
cxcyは円の中心座標で、rは半径を設定しています。
svgのcircleは始点が右端となりますので、アニメーションは頂点(上)から始まる方が心地よいので、cssにて90度左回転させ、塗りを透過させ、グラフの色が付いている部分は線として絵画させます。
※塗りではなく、線で絵画しているところがミソです!

アニメーションはcss

実際のcssは下記

さきほど書いたミソの理由がコレです^^
破線を絵画するstroke-dasharrayを使用することでアニメーションを可能にしています。
上記circleA4を例にとると【線部分0px・隙間723px(要するに723pxの無)】から1秒かけて【線部分723px・隙間723px(破線)】に変化させます、結果的に723px分の線が伸びていきます。
ちなみにここで登場する謎の723という数値ですが、これは絵画したsvgの円周長になります。
半径がr="115"でしたので、直径は230px、なので3.14掛けてザックリ723になります。
※ 私は古い人間なので円周率は3.14で習いました

真円をアニメーションしたければ

例えば半円であれば

となります。

中身が分かってしまえば、とても単純で簡単ですね。
あとは表示位置にきたら、アニメーションを開始させるようにjavascriptを仕込んでおけばOKです!

恒例の実用性ゼロ実装例

See the Pen 某有名映画のナニカを一筆書きしてみた by nanba (@nanba) on CodePen.

自称映画好きな私ですが、このシリーズは1本もキチンと観たことありません

See the Pen 某RX-0的なユニコーンっぽいモノを一筆書きしてみた by nanba (@nanba) on CodePen.

ガ〇ダム好きな某PMに捧ぐ

See the Pen アメコミっぽい某キャラを一筆書きしてみた by nanba (@nanba) on CodePen.

本当に1mmも実用性ないな…コレw

まとめ

svgとcssだけでちょっとしたワンポイントなどに使える小技の紹介でしたが、やりようによっては少しリッチなWebサイトに仕上げることもできるだろうと思います。
要はアイディア次第ですね! それと、忍耐力w

nanba

INDETAILには珍しいチカラワザ系コーダー

「いいね」ボタンを押すと、最新情報をすぐに確認できます。