東電電力使用状況ガジェットを流用し、今度はアナログ的な電力メーターを作ってみた。
デザインの方は、以前WPFで作ったKMeterを流用した。
[東京電力メーター]
今回、苦労したのはガジェットでの針の動き。
WPFとか、C#では針の座標を計算し線を描画していたけど、ガジェットでは、画像を指定しておけば、
後は、角度を指定してやれば、簡単に針が傾いてくれる。
例:
HTML側:
<g:image id=”needle” unselectable=”on” src=”img/needle.png” style=”position:absolute;left:60px;top:0px;width:13px;height:134px;z-index:10″ />
JavaScript側:
// 針を90度傾ける needle.Rotation = 90;
角度を時計の針で例えると、
12時はRotation=0(360)
3時はRotation =90
6時はRotation=180
9時はRotation=270
と言った感じ。
これは楽だ。
だけど、今度は針をパッと表示しただけではアナログっぽくない。
0からスルスルと針が回ってくるアニメーションをさせたい。
これが意外と難しいというか、やり方が分からず少しハマった。
結局、setTimeout関数をループ処理の中で使って、時間差で針を描画するようにしたら
それっぽく表示できるようになった。
function test(){ var cnt=0; // 0%から100%まで針を動かす for(i=0;i<=100;i++){ cnt++; // 20ミリ秒ずつ遅らせて別関数を呼び出す setTimeout(“setRotation(” + i + “)”,20*cnt); } } function setRotation(_val){ // 0%(180度)を基準に、引数で指定されたパーセントの値×2.7度 // (100%までのトータル角度が270度だとすると1度傾けるのに2.7度) s.Rotation = 2.7 * _val + 180; }