Naoki Otsu

SVGで円をアニメーションさせたい時のMEMO

2016-09-18

ローディングバーや円グラフを表示したい時など、
くるっと回る円のアニメーションを作りたい時があります。

Create_a_New_Pen.png

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>widthheightには、60px x 2 = 120px
これに、のちのち設定する円の外側の線幅(stroke-width)の4pxを足して、124pxを設定します。
<circle>cxcyには、124pxの半分の値を設定し、円を<svg>の中央に配置します。
rは円の半径で60pxを設定しますが、この値によって後々アニメーションさせる時の値が変わってきます。

CSSでは

<circle>filltransparentにして塗りつぶしなしに設定します。
strokestroke-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にあったのでメモしておきます。

https://codepen.io/kyledws/pen/Gvelt/