アニメーションSVGスピードメーターの作り方

A ゲージメーター 特定の範囲内の値を視覚的に示すツールです。コンピュータでは、 “ディスク容量インジケータ” ゲージメーターを使用して、使用可能な合計容量から使用されているディスク容量を示します。ゲージには、その範囲全体にわたってゾーンまたは領域があり、それぞれ独自の色で区別されています。フロントエンド開発では、 特定の範囲内のデータを表示するためのHTML5タグ.

この記事では、 半円形SVGゲージメーター, そしてそれをアニメ化します。このプレビューGIFを見てください。 Firefoxでの最終バージョンの動作：

メーターの 範囲は0〜100です, そしてそれは表示されます 3つの等しいゾーン 黄色、青、赤で。必要に応じてゾーンの範囲と数を変更できます.

説明のために、手動で計算し、次の手順でインラインSVG属性/プロパティを使用します。.

私の最後のデモでは、SVGプロパティの計算と挿入にCSSとJavaScriptを使用して、より柔軟にしています。.

1.円を描く

SVGで単純な円を描きましょう。 HTML5の新機能 tagを使用すると、HTMLコードにSVGを正しく追加できます。の中 タグを追加します。 SVGの形状はこんな感じです：

CSSでは、追加しましょう 幅 そして 高さ ラッパーのプロパティ、両方とも円の直径以上（この例では300ピクセル）。幅と高さも設定する必要があります。 #meter 100％までの要素.

 #wrapper width：400px;高さ：400ピクセル。 #meter width：100％;身長：100％。 

2.円にアウトラインを追加して塗りつぶしを削除します

の助けを借りて ストローク そして ストローク幅 SVGのプロパティで円に輪郭を追加し、 fill = "none" 円の塗りつぶしも削除するプロパティ.

3.円の半分だけを覆う

の 脳卒中 SVGプロパティは破線のアウトラインを作成し、2つの値を取ります, ダッシュ長 そして ギャップ長.

半円のアウトラインでは、 ダッシュ長 ダッシュが円の円周の半分を覆うように、値は円の半円周と等しい必要があります。 ギャップ長 値は残りの円周以上である必要があります.

それがもっとあるとき、それはブラウザによって残りの円周に変換されるでしょう、それ故に我々は完全な円周値を使用します。 ギャップ長. このようにして、残りの円周を計算することを避けられます.

計算を見てみましょう。

$\mathrm{円周}=2\times \times \times ¢Â？？？\pi \times r$

どこで r 半径です。半径が150の場合、円周は次のようになります。

$\begin{array}{}\mathrm{円周}=2\times \times \times ¢Â？？？\pi \times \mathrm{150}\\ \mathrm{円周}=942.48\end{array}$

それを2で割ると、半円周は471.24になるので、の値は 脳卒中 半径150の円内の半円アウトラインのプロパティは 471、943. この半円はメーターの低域ゾーンを示すために使用されます.

ご覧のとおり、逆さまになっているので、SVGを追加してSVGを上げましょう。 変形する 値がCSSのプロパティ rotateX（180度） に HTML要素.

 #meter transform：rotateX（180deg）; 

4.他のゾーンを追加する

の ミドルゾーン （青）は半円の2/3の部分をカバーする必要があり、471の2/3は314です。それでは、を使用して別の円をSVGに追加しましょう。 脳卒中 再度プロパティを、しかし今の値で 314、943.

  < /circle>  

の ファイナルゾーン （赤）は半円の最後の1/3部分をカバーする必要があり、471の1/3は157なので、この値をに追加します。 脳卒中 3番目の円の特性.

5.メーターの概要を追加する

見栄えを良くするために、メーターに灰色のアウトラインを追加しましょう。の ダッシュ長 白丸の半円は、半円周と等しい必要があります。コード内の他のすべての円の前に配置します。 ブラウザによって最初にレンダリングされる, そしてそれゆえに 地域の円の下に表示されます 画面上.

の ストローク幅 実際の輪郭の外観を与えるためには、他の円のそれよりも少し大きいプロパティが必要です。.

     < /circle>      

アウトラインエンド

アウトラインは半円の端を覆っていないので、もう1つの円を追加することによって、端に約2pxの2行を追加します。 ダッシュ長 2pxと ギャップ長 半円周のマイナス2px。したがっての価値 脳卒中 この円の所有物は 2、469.

マスク

それでは、低、中、高の範囲のゾーンの後に別の円を追加しましょう。新しい円は、ゲージメーターが操作されるときに不要なゾーン領域を隠すためのマスクとして機能します。.

そのプロパティは白丸のプロパティと同じになり、その線の色もグレーになります。マスクは後でJavascriptでサイズ変更され、入力スライダに反応してその下のゾーンが表示されます。.

これまでの組み合わせコードは以下のとおりです。.

マスクの下の領域を表示したい場合は、マスクのサイズを小さくする必要があります。 ダッシュ長. たとえば、 脳卒中 マスクサークルの特性は 157、943, 円弧は次の状態になります。

だから、今やらなければいけないことは、 脳卒中 アニメーションのJavaScriptを使用してマスクの。しかし、その前に、前述したように、最後のデモでは、SVGプロパティの大部分を計算して追加するためにCSSとJavaScriptを使用しました。.

以下に、上記と同じ結果になるHTML、CSS、およびJavaScriptコードがあります。.

HTML

針の画像を追加しました（gauge-needle.svg）、範囲スライダ（入力番号スライダユーザー入力とラベル（label＃lblスライダの値を0〜100の範囲で表示する.

    0 
 

CSS

下のCSSコードはSVGにスタイル規則を追加します。SVG図形はHTML要素と同じ方法でスタイルを設定できるからです。あなたがCSSでSVGをスタイルする方法についてもっと読みたいならば、この記事を見てください。スライダーをスタイリングするために、この記事をチェックしてください.

 #wrapper position：relative;マージン：自動。 #meter width：100％;身長：100％。 transformX（180度）を変換します。 fill：none;; #mask stroke：＃F1F1F1;。ストローク幅：65。範囲ストローク幅：60; #slider、＃lbl position：absolute; #slider cursor：pointer;左：0;マージン：自動。右：0;トップ：58％。幅：94％。 #lbl 背景色：＃4B4C51; border-radius：2ピクセル。カラー：ホワイト。 font-family： 'courier new';フォントサイズ：15pt。フォントの太さ：太字。パディング：4px 4px 2px 4px。右：-48ピクセル。トップ：57％。 #meter_needle 身長：40％;左：0;マージン：自動。位置：絶対右：0;トップ10％;変換原点：下中央。 / *向きの修正* / transform：rotate（270deg）; 

JavaScript

JavaScriptでは、まずラッパーとすべての円弧の寸法を計算して設定し、次に適切な寸法を追加します。 脳卒中 円に値。その後、アニメーションを実行するためにカスタムイベントを範囲スライダにバインドします。.

 / *すべての円の半径を設定します* / var r = 250; var circles = document.querySelectorAll（ '。circle'）; var total_circles = circles.length; （var i = 0; iの場合 < total_circles; i++)  circles[i].setAttribute('r', r);  /* Set meter's wrapper dimension */ var meter_dimension = (r * 2) + 100; var wrapper = document.querySelector("#wrapper"); wrapper.style.width = meter_dimension + "px"; wrapper.style.height = meter_dimension + "px"; /* Add strokes to circles */ var cf = 2 * Math.PI * r; var semi_cf = cf / 2; var semi_cf_1by3 = semi_cf / 3; var semi_cf_2by3 = semi_cf_1by3 * 2; document.querySelector("#outline_curves") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#low") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#avg") .setAttribute("stroke-dasharray", semi_cf_2by3 + "," + cf); document.querySelector("#high") .setAttribute("stroke-dasharray", semi_cf_1by3 + "," + cf); document.querySelector("#outline_ends") .setAttribute("stroke-dasharray", 2 + "," + (semi_cf - 2)); document.querySelector("#mask") .setAttribute("stroke-dasharray", semi_cf + "," + cf); /* Bind range slider event*/ var slider = document.querySelector("#slider"); var lbl = document.querySelector("#lbl"); var mask = document.querySelector("#mask"); var meter_needle = document.querySelector("#meter_needle"); function range_change_event()  var percent = slider.value; var meter_value = semi_cf - ((percent * semi_cf) / 100); mask.setAttribute("stroke-dasharray", meter_value + "," + cf); meter_needle.style.transform = "rotate(" + (270 + ((percent * 180) / 100)) + "deg)"; lbl.textContent = percent + "%";  slider.addEventListener("input", range_change_event); 

習慣 range_change_event（） 関数

メーターの動作は range_change_event（） マスクサイズと針のアニメーションの調整を担当するカスタム関数.

それは0から100の間にあるスライダー値（ユーザー入力）を取り、それを相当する半円周に変換します（meter_value（471は半径150の半円周である）の間の値の meter_value として ダッシュ長 マスクの 脳卒中 財産.

の range_change_event（） カスタム関数はまた、（0-100の範囲に入る）ユーザー入力を0-180に相当する程度に変換した後に針を回転させます。.

上記のコードでは、針の回転に270°が追加されています。これは、使用した画像が直立した針の画像であり、最初は270°回転させて左に平らになるようにするためです。.

最後に、私は range_change_event（） レンジメーターに連動してゲージメーターを操作できるようにする.

をチェック デモ または当社のソースコードを見てください。 Githubリポジトリ.