Animasyonlu SVG Speedometer Nasıl Yapılır

bir ölçer metre belirli bir aralıktaki değeri görsel olarak gösteren bir araçtır. Bilgisayarlarda, bir “disk alanı göstergesi” kullanılabilir toplam değerden ne kadar disk alanı kullanıldığını göstermek için bir ölçer kullanır. Ölçerler, her biri kendi rengiyle farklılaştırılan, aralığı boyunca bölgelere veya bölgelere sahiptir. Ön uç geliştirme, biz kullanabilirsiniz Verileri belirli bir aralıkta görüntülemek için HTML5 etiketi.

Bu yayında, bir Yarı dairesel şekil SVG ölçer metre, ve canlandırın. Gösteren bu önizleme GIF'ine bir göz atın Son sürüm Firefox'ta nasıl çalışacak:

Sayacın aralık 0-100, ve görüntüler üç eşit bölge sarı, mavi ve kırmızı. Bölgelerin menzilini ve sayısını ihtiyaçlarınıza göre değiştirebilirsiniz.

Açıklama amacıyla, manuel hesaplamalar yapacağım ve aşağıdaki adımlarda satır içi SVG niteliklerini / özelliklerini kullanacağım.

Bununla birlikte, son demom, daha esnek hale getirmek için SVG özelliklerinin hesaplanması ve eklenmesi için CSS ve JavaScript kullanıyor..

1. Bir daire çizin

SVG'de basit bir daire çizelim. HTML5'in yeni etiketi, HTML koduna doğrudan SVG eklememizi sağlar. İçinde etiketi ekledik SVG şekli şöyle:

CSS’de ekleyelim Genişlik ve yükseklik sargının özellikleri, dairenin çapından büyük veya eşit (örneğin örneğimizde 300px). Biz de genişliğini ve yüksekliğini ayarlamak gerekir #metre % 100 eleman.

 #wrapper genişlik: 400px; yükseklik: 400px;  #meter genişlik:% 100; yükseklik:% 100; 

2. Daireye anahat ekleyin ve dolguyu kaldırın

Yardımı ile inme ve Darbe genişliği SVG özellikleri, çevreye bir anahat ekleriz ve doldurmak = "none" çemberin dolgusunu da kaldırdığımız özellik.

3. dairenin sadece yarısını kaplayın

Strok DashArray SVG özelliği kesikli bir anahattı oluşturur ve iki değer alır, çizgi uzunluğu ve aralık uzunluğu.

Yarım daire anahattı için çizgi uzunluğu değerin, dairenin yarı çevresine eşit olması gerekir; böylece çizgi, dairenin çevresinin yarısını kaplar ve aralık uzunluğu değerin kalan çevreye eşit veya daha fazla olması gerekir.

Daha fazla olduğunda, tarayıcı tarafından kalan çevreye dönüştürülecek, bu nedenle tam çevre değerini kullanacağız. aralık uzunluğu. Bu şekilde kalan çevreyi hesaplamaktan kaçınabiliriz.

Hesaplamaları görelim:

$\mathrm{çevre}=2A\; ??\; a\; ??\; â¢A\; ??\; a\; ??\pi xr$

nerede r yarıçapı. 150 yarıçapı için çevre:

$\begin{array}{}\mathrm{çevre}=2A\; ??\; a\; ??\; â¢A\; ??\; a\; ??\pi x\mathrm{150}\\ \mathrm{çevre}=\mathrm{942,48}\end{array}$

Eğer 2'ye bölersek, yarı çevre için 471.24 elde ederiz, yani Strok DashArray 150 yarıçapı bir daire içinde yarım daire anahat özelliği 471, 943. Bu yarı daire, metrenin Düşük Menzil Bölgesini belirtir..

Gördüğünüz gibi baş aşağı duruyor, hadi eklemek için SVG'yi açalım. dönüştürmek Değeri olan CSS özelliği rotateX (180 derece) -e HTML elemanı.

 #meter transform: rotateX (180deg); 

4. Diğer bölgeleri ekleyin

orta bölge (mavi) yarım dairenin ⅔ kısmını kapsamalıdır ve 471'in ⅔ 314'üdür. Öyleyse, kullanarak SVG'ye başka bir daire ekleyelim. Strok DashArray özellik tekrar, ancak şimdi değeri 314, 943.

  < /circle>  

son bölge (kırmızı) yarı dairenin son kısmını kapsamalıdır ve 471'in 157 157, yani bu değeri ekleyeceğiz. Strok DashArray üçüncü dairenin mülkü.

5. Metre Ana Hattını Ekleyin

Daha iyi görünmesi için metreye gri bir anahat ekleyelim. çizgi uzunluğu anahat dairenin yarı çevresine eşit olması gerekir. Koddaki diğer tüm dairelerin önüne koyarız, böylece ilk tarayıcı tarafından işlenen, ve bu nedenle olacak bölge çevrelerinin altında gösterilir ekranda.

Darbe genişliği Mülkiyet, gerçek bir taslak ortaya koyması için diğer dairelere göre biraz daha büyük olması gerekir..

     < /circle>      

Anahat Biter

Anahat, yarım dairenin uçlarını kapsamadığı için, uçlarına başka bir daire ekleyerek uçlarına yaklaşık 2px'lik 2 satır ekleriz. çizgi uzunluğu 2px ve bir aralık uzunluğu yarı çevre eksi 2px. Bu nedenle değeri Strok DashArray Bu dairenin özelliği 2, 469.

maskelemek

Şimdi düşük, ortalama ve yüksek aralıklı bölgelerden sonra başka bir daire ekleyelim. Yeni daire, ölçüm aleti çalıştırıldığında gereksiz bölge bölgelerini gizlemek için maske işlevi görür..

Özellikleri anahat çemberininkilerle aynı olacak ve kontur rengi de gri olacaktır. Maske daha sonra bir giriş kaydırıcısına karşılık olarak altındaki bölgeleri ortaya çıkarmak için Javascript ile yeniden boyutlandırılacak.

Birleşik kod şimdiye kadar.

Maskenin altındaki bir bölgeyi ortaya çıkarmak istiyorsak, maskenin boyutunu küçültmeliyiz çizgi uzunluğu. Örneğin, ne zaman Strok DashArray maske çemberinin özelliği 157, 943, yaylar aşağıdaki durumda duracaktır:

Yani, şimdi yapmamız gereken tek şey ayarlamak Strok DashArray maskenin animasyon için JavaScript kullanması. Ancak bunu yapmadan önce, daha önce de belirttiğim gibi, son demom için SVG özelliklerinin çoğunu hesaplamak ve eklemek için CSS ve JavaScript kullandım..

Aşağıda, yukarıdakiyle aynı sonuca yol açan HTML, CSS ve JavaScript kodunu bulabilirsiniz..

HTML

Bir iğne resmi ekledim (ölçer-needle.svg), bir aralık kaydırıcısı (giriş # kaydırıcı) kullanıcı girişine ve bir etikete (Etiket # lbl) kaydırıcı değerini 0-100 aralığında görüntülemek için.

    0 
 

CSS

Aşağıdaki CSS kodu SVG'ye stil kuralları ekler, çünkü SVG şekilleri HTML öğeleriyle aynı stilde olabilir. SVG'yi CSS ile nasıl stillendireceğiniz hakkında daha fazla bilgi edinmek istiyorsanız, bu yazıya bir göz atın. Kaydırıcıyı stillendirmek için bu yazıya göz atın.

 #wrapper position: göreceli; marj: otomatik;  #meter genişlik:% 100; yükseklik:% 100; dönüşümü: rotateX (180deg);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; strok genişliği: 65;  .range vuruş genişliği: 60;  #slider, #lbl position: absolute;  #slider imleç: pointer; solda: 0; marj: otomatik; sağ: 0; üst:% 58; genişlik:% 94;  #lbl background-color: # 4B4C51; sınır yarıçapı: 2 piksel; Beyaz renk; font-family: 'kurye yeni'; yazı tipi boyutu: 15pt; yazı tipi ağırlığı: kalın; dolgu maddesi: 4px 4px 2px 4px; sağ: -48px; üst:% 57;  #meter_needle height:% 40; solda: 0; marj: otomatik; pozisyon: mutlak; sağ: 0; en iyi 10%; dönüşüm-kökeni: alt merkez; / * yönlendirme düzeltmesi * / dönüşümü: döndürme (270deg); 

JavaScript

JavaScript'te, önce paketleyicinin ve tüm yayların boyutlarını hesaplar ve ayarlar, sonra uygun olanı ekleriz. Strok DashArray çevrelere değer. Bundan sonra, animasyonu gerçekleştirmek için özel bir olayı aralık kaydırıcısına bağlayacağız.

 / * Tüm çevreler için yarıçapı ayarla * / 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); 

Gelenek range_change_event () fonksiyon

Sayacın davranışı cihaz tarafından gerçekleştirilir. range_change_event () Maske boyutunun ayarlanması ve iğnenin animasyonundan sorumlu özel fonksiyon.

0-100 arasında olan kaydırıcı değerini (kullanıcı girişi) alır, yarı çevreye eşdeğerine dönüştürür (meter_value) 471-0 (471 yarıçapı 150'nin yarı çevresidir) arasındaki bir değere ve meter_value olarak çizgi uzunluğu maskenin Strok DashArray özellik.

range_change_event () custom fonksiyonu ayrıca (0-100 aralığında gelen) kullanıcı girişini 0-180 dereceye eşdeğerine çevirdikten sonra iğneyi döndürür.

İğnenin yukarıdaki kodda dönmesine 270 ° eklenir, çünkü kullandığım görüntü dik bir iğnedendir ve başlangıçta sola doğru düz durması için 270 ° döndürmek zorunda kaldım..

Sonunda, ben bağlı range_change_event () aralık kaydırıcısına göre işlev yapın, böylece gösterge ölçer onunla birlikte çalıştırılabilir..

Kontrol et gösteri veya kaynak kodumuza bir göz atın. Github deposu.