كيفية جعل الرسوم المتحركة SVG عداد السرعة

ا مقياس متر هي أداة تشير بصريًا إلى قيمة ضمن نطاق معين. في أجهزة الكمبيوتر ، أ “مؤشر مساحة القرص” يستخدم عداد قياس لإظهار مقدار مساحة القرص المستخدمة من إجمالي المتاحة. المقاييس لها مناطق أو مناطق عبر مجموعتها ، كل منها متباينة بلونه الخاص. في تطوير الواجهة الأمامية ، يمكننا استخدام علامة HTML5 لعرض البيانات في نطاق معين.

في هذا المنشور ، سنقوم بعمل SVG مقياس متر من شكل دائري, وتحريكها. ألق نظرة على هذه المعاينة التي تظهر GIF كيف ستعمل النسخة النهائية في فايرفوكس:

المتر النطاق هو 0-100, ويعرض ثلاث مناطق متساوية باللون الأصفر والأزرق والأحمر. يمكنك تغيير النطاق وعدد المناطق وفقًا لاحتياجاتك.

لأغراض التوضيح ، سوف أقوم بإجراء حسابات يدوية ، واستخدم سمات / خصائص SVG المضمنة في الخطوات التالية.

ومع ذلك ، يستخدم العرض التوضيحي النهائي الخاص بي CSS و JavaScript لحساب وإدراج خصائص SVG لجعلها أكثر مرونة.

1. ارسم دائرة

لنرسم دائرة بسيطة في SVG. HTML5 الجديد تسمح لنا العلامة بإضافة SVG مباشرة إلى رمز HTML. داخل ال العلامة ، نضيف شكل SVG مثل هذا:

في CSS ، دعنا نضيف عرض و ارتفاع خصائص للملف ، سواء أكبر من أو يساوي قطر الدائرة (هو 300 بكسل في مثالنا). نحن بحاجة أيضا إلى ضبط عرض وارتفاع #متر العنصر إلى 100 ٪.

 #wrapper width: 400px؛ الارتفاع: 400 بكسل ؛  #meter width: 100٪؛ الارتفاع: 100 ٪ ؛ 

2. إضافة مخطط تفصيلي إلى الدائرة وإزالة التعبئة

مع مساعدة من السكتة الدماغية و عرض السكتة الدماغية خصائص SVG نقوم بإضافة مخطط تفصيلي إلى الدائرة ، وباستخدام ملء = "لا شيء" خاصية نزيل ملء الدائرة كذلك.

3. تغطية فقط نصف الدائرة

ال السكتة الدماغية dasharray تقوم خاصية SVG بإنشاء مخطط تفصيلي متقطع ، وتتخذ قيمتين, طول اندفاعة و طول الفجوة.

لمخطط نصف دائرة ، و طول اندفاعة يجب أن تكون القيمة مساوية لمحيط الدائرة ، بحيث تغطي الشرطة نصف محيط الدائرة و طول الفجوة يجب أن تكون القيمة مساوية أو أكثر من المحيط المتبقي.

عندما يكون أكثر من ذلك ، سيتم تحويله إلى المحيط المتبقي بواسطة المستعرض ، وبالتالي سنستخدم قيمة محيط كاملة لل طول الفجوة. بهذه الطريقة يمكننا تجنب حساب محيط المتبقية.

دعنا نرى الحسابات:

$\mathrm{محيط}=2Ã\; ؟؟\; Â\; Ã\; ؟؟¢Â\; Â\; ؟؟\; ؟؟\pi \times ص$

أين ص هو نصف القطر. بالنسبة لنصف قطر 150 ، يكون المحيط هو:

$\begin{array}{}\mathrm{محيط}=2Ã\; ؟؟\; Â\; Ã\; ؟؟¢Â\; Â\; ؟؟\; ؟؟\pi \times \mathrm{150}\\ \mathrm{محيط}=942.48\end{array}$

إذا قسمناها على 2 ، نحصل على 471.24 لمحيط شبه ، وبالتالي فإن قيمة السكتة الدماغية dasharray خاصية مخطط تفصيلي نصف دائرة في دائرة نصف قطرها 150 هو 471 ، 943. سيتم استخدام هذه الدائرة شبه للدلالة على منطقة المدى المنخفض للمتر.

كما ترون ، إنها مقلوبة رأسًا على عقب ، لذلك دعونا نقلب SVG للأعلى عن طريق إضافة تحول خاصية CSS بقيمة rotateX (180deg) إلى عنصر HTML.

 #meter convert: rotateX (180deg) ؛ 

4. إضافة المناطق الأخرى

ال المنطقة الوسطى (أزرق) يجب أن يغطي جزء نصف الدائرة ، و ⅔ من 471 هو 314. لذلك ، دعونا نضيف دائرة أخرى إلى SVG لدينا باستخدام السكتة الدماغية dasharray الملكية مرة أخرى ، ولكن الآن مع قيمة 314 ، 943.

  < /circle>  

ال المنطقة النهائية (أحمر) يجب أن يغطي الجزء الأخير من نصف الدائرة ، و ⅓ من 471 هو 157 ، لذلك سنضيف هذه القيمة إلى السكتة الدماغية dasharray ممتلكات الدائرة الثالثة.

5. أضف مخطط العداد

دعنا نضيف مخططًا رماديًا للمتر لجعله يبدو أفضل. ال طول اندفاعة من دائرة المخطط التفصيلي يجب أن يكون مساوياً لشبه المحيط. نضعه قبل جميع الدوائر الأخرى في الكود ، بحيث يكون كذلك المقدمة لأول مرة من قبل المتصفح, وبالتالي سوف يكون عرض تحت دوائر المنطقة على الشاشة.

ال عرض السكتة الدماغية يجب أن تكون الخاصية أكبر قليلاً من تلك الموجودة في الدوائر الأخرى ، حتى تعطي مظهرًا حقيقيًا.

     < /circle>      

الخطوط العريضة ينتهي

نظرًا لأن المخطط التفصيلي لا يغطي نهايات نصف الدائرة ، فإننا نضيف أيضًا سطرين من 2 بكسل تقريبًا إلى الأطراف بإضافة دائرة أخرى مع طول اندفاعة من 2px و طول الفجوة من شبه محيط ناقص 2px. وبالتالي فإن قيمة السكتة الدماغية dasharray خاصية هذه الدائرة هي 2 ، 469.

قناع

لنقم الآن بإضافة دائرة أخرى بعد المناطق المنخفضة والمتوسطة والعالية النطاق. ستعمل الدائرة الجديدة كقناع لإخفاء مناطق المنطقة غير الضرورية عند تشغيل جهاز القياس.

ستكون خصائصه مماثلة لخصائص دائرة المخطط التفصيلي ، وسيكون لون الحد أيضًا رماديًا. سيتم تغيير حجم القناع لاحقًا باستخدام Javascript لكشف المناطق الموجودة تحته استجابةً لمنزلق الإدخال.

الكود المدمج حتى الآن على النحو التالي.

إذا كنا نريد الكشف عن منطقة أسفل القناع ، فسنحتاج إلى تقليل حجم القناع طول اندفاعة. على سبيل المثال ، عندما تكون قيمة السكتة الدماغية dasharray خاصية دائرة القناع 157 ، 943, ستقف الأقواس في الحالة التالية:

لذلك ، كل ما علينا فعله الآن هو ضبط السكتة الدماغية dasharray القناع باستخدام جافا سكريبت للرسوم المتحركة. ولكن قبل أن نفعل ذلك ، كما ذكرت من قبل ، بالنسبة إلى العرض التوضيحي النهائي ، استخدمت CSS و JavaScript لحساب وإضافة معظم خصائص SVG.

يمكنك العثور أدناه على شفرة HTML و CSS و JavaScript التي تؤدي إلى نفس النتيجة على النحو الوارد أعلاه.

HTML

أضفت صورة إبرة (مقياس-needle.svg) ، شريط تمرير نطاق (إدخال # المنزلق) لإدخال المستخدم ، والتسمية (تسمية # LBL) لعرض قيمة شريط التمرير في حدود 0-100.

    0 
 

CSS

يضيف رمز CSS أدناه قواعد النمط إلى SVG ، حيث يمكن تصميم أشكال SVG بنفس طريقة عناصر HTML. إذا كنت ترغب في قراءة المزيد حول كيفية تصميم SVG مع CSS ، ألق نظرة على هذا المنشور. لتصميم شريط التمرير ، راجع هذا المنشور.

 #wrapper position: نسبي ؛ الهامش: السيارات ؛  #meter width: 100٪؛ الارتفاع: 100 ٪ ؛ تحويل: rotateX (180deg) ؛  .circle fill: none؛  .outline ، #mask stroke: # F1F1F1؛ عرض السكتة الدماغية: 65 ؛  .range stroke-width: 60؛  #slider، #lbl position: absolute؛  #slider cursor: pointer؛ اليسار: 0 ؛ الهامش: السيارات ؛ اليمين: 0 ؛ أعلى: 58 ٪ ؛ العرض: 94 ٪ ؛  #lbl background-color: # 4B4C51؛ نصف قطر الحدود: 2 بكسل ؛ اللون الابيض؛ font-family: 'courier new' ؛ حجم الخط: 15pt ؛ وزن الخط: غامق ؛ الحشو: 4px 4px 2px 4px ؛ اليمين: -48 بكسل ؛ أعلى: 57 ٪ ؛  #meter_needle height: 40٪؛ اليسار: 0 ؛ الهامش: السيارات ؛ الموقف: مطلق ؛ اليمين: 0 ؛ أعلى 10٪؛ تحويل الأصل: مركز أسفل. / * direction direction * / convert: rotate (270deg)؛ 

جافا سكريبت

في JavaScript ، نقوم أولاً بحساب وتعيين أبعاد المجمع وكل الأقواس ، ثم نضيف الحجم المناسب السكتة الدماغية dasharray القيم إلى الدوائر. بعد ذلك ، سنربط حدثًا مخصصًا بمنزلق النطاق من أجل تنفيذ الرسوم المتحركة.

 / * ضبط نصف القطر لجميع الدوائر * / 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-0 (471 هو شبه محيط لنصف القطر 150) ، ويضع ذلك meter_value كما طول اندفاعة من القناع السكتة الدماغية dasharray خاصية.

ال range_change_event () تعمل الوظيفة المخصصة أيضًا على تدوير الإبرة بعد تحويل مدخلات المستخدم (الواردة في نطاق 0-100) إلى ما يعادل درجة 0-180.

تتم إضافة 270 درجة إلى دوران الإبرة في الكود أعلاه لأن الصورة التي استخدمتها إبرة منتصبة واضطررت إلى تدويرها 270 درجة في البداية لجعلها مستوية على يسارها.

وأخيرا ، أنا ملزمة range_change_event () وظيفة على شريط التمرير المدى ، بحيث يمكن تشغيل متر قياس معها.

تفحص ال عرض أو نلقي نظرة على شفرة المصدر في موقعنا مستودع جيثب.