SVG+CSS+JSで時間表示/動画パイタイマーの作成方法
やりたいこと:残留時間が表示しながら円を描く動画効果のタイマーを作成します
- 残量時間を動画で表示します
- 残量時間のパイを動画で表示します
SVG+CSS+JSでタイマーの動画効果を作成します
- svg、css、js三兄弟でパイタイマーを実現します

- HTMLでタイマーを描く場所の用意
<div class="item">
<div class="timer-time">10</div>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Pie Timer</title>
<circle id="circle" class="timer-circle" r="40" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>
- svgの「circle」タグで円を描きます
<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Pie Timer</title>
<circle id="circle" class="timer-circle" r="40" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
- cssで残量時間と円の中心に合わせ、パイ動画の用意
/* タイマーの表示場所指定 */
.item {
position: relative;
float: left;
}
/* 残量時間を円の中心に合わせ */
.timer-time {
text-align:center;
position: absolute;
line-height: 4em;
width: 100%;
font-size:2.5em;
}
/* 真上から円を描く指定 */
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
/* 円を描く動画の準備 */
.timer-circle {
stroke-dasharray: 280;
stroke-dashoffset: 280;
transition: all 1s linear;
}
- 円を描く準備: stroke-dasharray: 280; stroke-dashoffset: 280; はSVG動画作成によく利用される手法です。簡単に言えば、画像を隠して、JSのタイマーより画像を描きます。
- transition: all 1s linear; 動画をスムーズに描けるように設定
- JSのタイマーより残量時間のセット、タイマーパイを描きます
var time = 10;
var initialOffset = '280';
var i = 1
var interval = setInterval(function() {
$('.timer-circle').css('stroke-dashoffset', initialOffset-(i*(initialOffset/time)));
$('.timer-time').text(10-i);
if (i == time) { clearInterval(interval); } // 連続の場合: i=1;
i++;
}, 1000);
感想:SVGを利用したほうがCSS+JSのみの方式より簡単で、シンプルです
- SVGが画像を描くには得意です。
- SVGがCSS、JSと一緒に使用すればよい効果的な動画作成ができます
- CSS、JSのみでパイタイマーの作成がネット上でよく紹介されていますが、cssの設定に気を付けないと、動画の動きがスムーズになれないことがあります。この点ではSVGのほうが扱いやすいです