SVGで円をアニメーションさせたい時のMEMO
ローディングバーや円グラフを表示したい時など、 くるっと回る円のアニメーションを作りたい時があります。
http://codepen.io/melo15/pen/yJmVEJ
実装方法
下記のように実装すると良いです。
<svg width="124" height="124">
<circle cx="62" cy="62" r="60" />
</svg>svg {
transform: rotate(-90deg);
}
circle {
fill: transparent;
stroke: #4fa8df;
stroke-width: 4;
animation: circle 1s infinite;
}
@keyframes circle {
0% {
stroke-dasharray: 0 377;
}
99.9%,
to {
stroke-dasharray: 377 377;
}
}対応ブラウザ
インライン SVG なので、モダンブラウザは対応していて、 IE8 以下、Android2 系以下辺りは使えなさそうです。 http://caniuse.com/#feat=svg-html5
実装方法
半径 60px の円を作りたいとすると、
<svg>のwidthとheightには、60px x 2 = 120px
これに、のちのち設定する円の外側の線幅(stroke-width)の 4px を足して、124px を設定します。
<circle>のcxとcyには、124px の半分の値を設定し、円を<svg>の中央に配置します。
rは円の半径で 60px を設定しますが、この値によって後々アニメーションさせる時の値が変わってきます。
CSS では
<circle>のfillをtransparentにして塗りつぶしなしに設定します。
strokeとstroke-widthを指定して、円の外側に線を表示します。
これをanimationを使って、くるっと回るアニメーションにします。
アニメーションでは
破線を設定するstroke-dasharrayを使います。
stroke-dasharray: 破線の長さ 破線の間隔;
この破線の長さをアニメーションさせる事で、くるっと回るアニメーションとなります。
破線の間隔の値
この時、破線の間隔の値は、円周の長さを設定する必要があり、計算によって導きます。
円周の長さは直径 x 3.14で計算します。
今回は、120 x 3.14 = 376.8なので、小数点を切り上げて377としました。
あとは、破線の長さを 0 から 377 までアニメーションさせると、くるっと 1 周するアニメーションとなります。
@-webkit-keyframes circle {
0% {
stroke-dasharray: 0 377;
}
99.9%,
to {
stroke-dasharray: 377 377;
}
}1 周ではなく半分のところで止めたい場合は
半分のところで止めたい場合は、377 / 2 = 188.5などを設定すると良いです。
最後に、そのままだとアニメーションの開始点が 90 度ずれてしまうので、
<svg>にtransform: rotate(-90deg);を設定して、上からくるっと回るアニメーションにします。
同じようなアニメーションのデモも、CodePen にあったのでメモしておきます。