SVGでタイマーを作る


Scalable Vector Graphics(SVG)を用いて、「タイマー」を作りました。
長方形(バー)が縮むことで、時間経過が見えるタイマーです。

 

 

 

 

記事「1分タイマーの作り方2」では、Canvasを使いましたが、今回はSVGを使います。

(注)SVG(Scalable Vector Graphics)
SVGプログラミングの詳細は、前回記事「SVGで長方形を描く」をご参照ください。

 

以前、記事「1分タイマーの作り方」で、1分のカウントダウンタイマーをプログラミングしました。

また、記事「SVGで長方形を描く」で、長方形の描画と移動をプログラミングしました。

今回は、上記2つのプログラムを組み合わせることで、長方形の長さ変化により時間経過が見えるタイマーを作ります。

 

長方形(バー)が縮んでいくタイマー

  • タイマー部: 1分のカウントダウンタイマー
  • バー描画部: 長方形の描画・変形

(注)タイマー部やバー描画部の詳しい説明は、上記2つの記事をご覧ください。

 

 

1分タイマーのタイマー部

プログラム(タイマー部)

タイマーに関する行を、マーカー表示しました。

 

 

プログラム(タイマー部)の説明

グローバル変数は4個、関数は2個(Rectangle, function)です。

 

グローバル変数

  • timer_ID: タイマーを識別するID
  • time     : 経過時間を保存する変数
  • set_time: 設定時間、60秒で初期化
  • interval : 時間間隔、1秒(1000ミリ秒)で初期化

 

window.onload = function()

この関数に、オンロード直後に実行するプログラムを記述します。

 

上記プログラムの35行目で、タイマーを設定しています。

1秒間隔で、Rectangle()関数を呼び出します。

 

36行目で、変数timeに値60を代入しています。

 

(注)setInterval関数の詳しい説明は、記事「1分タイマーの作り方」をご参照ください。

 

 

Rectangle()

22行目で、変数timeから1引いています。

Rectangle()関数は、1秒に一回動きます。

すなわち、Rectangle()関数が動いたときは、前回動いたときより1秒経過しています。

 

24行目から26行目で、タイマーを消去しています。

変数timeの値が「0」ならば、タイマーを消去します。

 

 

1分タイマーのバー描画部

プログラム(バー描画部)

プログラムの内容は、プログラム(タイマー部)と同じです。

バーの描画に関する行を、マーカー表示しました。

 

 

プログラム(バー描画部)の説明

グローバル変数は2個、関数は2個(Rectangle, function)、要素は2個(svg, rect)です。

 

svg要素

svg300.50
svg要素: サイズは300×50(px)

  • width: svgの横幅は300px
  • height: svgの高さは50px
  • style : ”background: green”

 

rect要素

rectangle-bar
rect要素: サイズは300×50(px)

  • width: rectの横幅は300px
  • height: rectの高さは50px
  • id     : ”rect”
  • fill    : ”orange”

 

グローバル変数

  • w        : バーの長さ、300で初期化
  • svgRect: rect要素を保存する変数

 

window.onload = function()

33行目で、変数svgRectに、rect要素を代入しています。

 

Rectangle()

23行目で、バーの長さを「1秒分」縮めています。

setAttributeメソッドを用いて、width属性を書き換えています。

 

13行目、16行目より、wが300、set_timeが60なので、w*(time/set_time)の値は以下となります。

  • timeが60のとき: 300*(60/60) = 300
  • timeが30のとき: 300*(30/60) = 150
  • timeが  0のとき: 300*(  0/60) =    0

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。