تحريك الإطارات الرئيسية بناءً على القيم الديناميكية باستخدام JavaScript

كيفية حساب وتحريك قيم الإطار الرئيسي باستخدام جافا سكريبت

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

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

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

سوف ترشدك هذه المقالة خلال استخدام JavaScript لتجريد البيانات الرقمية، وحساب النسب المئوية، وتطبيقها على الإطارات الرئيسية باستخدام خاصية Stroke-dashoffset. في النهاية، سيكون لديك فهم واضح لكيفية عمل JavaScript وCSS معًا لإنشاء رسوم متحركة سريعة الاستجابة.

تحريك دوائر SVG باستخدام JavaScript: دليل خطوة بخطوة

في هذا المثال، قمنا بإنشاء رسم متحرك ديناميكي لدائرة SVG باستخدام مزيج من JavaScript وCSS. الهدف الرئيسي هو تحريك تقدم الدائرة لتمثيل عدد الاشتراكات بشكل مرئي في الوقت الفعلي. تستخدم الدائرة السكتة الدماغية-اندفاعة إزاحة خاصية CSS، التي تتحكم في مقدار حدود الدائرة المرئية. يتم استخدام JavaScript لجلب وحساب النسبة المئوية للتقدم ثم تطبيق هذه القيمة على الحد، مما يسمح بالرسوم المتحركة السلسة بناءً على البيانات في الوقت الفعلي.

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

يعالج البرنامج النصي الثاني تدوير التسمية، مما يضيف طبقة من المحتوى الديناميكي إلى الشاشة. تتم إضافة التسميات إلى DOM باستخدام عقدة الاستنساخ () الطريقة، التي تكرر قالب التسمية الموجود. يتم تدوير كل ملصق على فترات زمنية محددة، والتي يتم التحكم فيها بواسطة setTimeout() وظيفة. تؤدي هذه الطريقة إلى تشغيل التدوير بعد فترة تأخير محددة، مما يؤدي إلى إنشاء انتقال سلس بين التسميات دون الحاجة إلى تدخل المستخدم.

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

// HTML and SVG structure
<div id="labels"></div>
<svg width="200" height="200">
<circle id="circle" cx="100" cy="100" r="90" />
</svg>
// JavaScript to animate stroke-dashoffset
let labels = document.getElementById("labels");
const SubGoal = 50; // Total subscription goal
function updateProgress(data) {
  const SubCount = parseInt(data.split('/')[0]); // Extract number
  const SubPercent = SubCount / SubGoal; // Calculate percentage
  const SubPercentStroke = 450 - 450 * SubPercent; // Set stroke offset
  document.getElementById('circle').style.strokeDashoffset = SubPercentStroke;
}
// Example usage
fetch('subscribers.txt').then(response => response.text())
.then(data => updateProgress(data));

// Label rotation logic
var displaySettings = "RotatingDisplays";
var displayRotationSeconds = 2;
var displayRotationIndex = 0;
function rotateLabelDisplay() {
  if (displayRotationIndex >= labels.children.length) {
    displayRotationIndex = 0;
  }
  for (const label of labels.children) {
    label.style.visibility = 'hidden';
  }
  let label = labels.children[displayRotationIndex];
  label.style.visibility = 'visible';
  displayRotationIndex++;
  setTimeout(rotateLabelDisplay, displayRotationSeconds * 1000);
}
// Trigger rotation if display setting is enabled
if (displaySettings === "RotatingDisplays") {
  rotateLabelDisplay();
} else {
  labels.children[0].style.visibility = "visible";
}

تحسين الرسوم المتحركة باستخدام متغيرات JavaScript وCSS

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

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

بالإضافة إلى ذلك، الجمع requestAnimationFrame تعد الإطارات الرئيسية طريقة أخرى لإنشاء رسوم متحركة سلسة وفعالة. تضمن هذه الطريقة تنفيذ الرسوم المتحركة أثناء دورة إعادة الرسم المثالية للمتصفح، مما يوفر أداءً أفضل مقارنةً بـ setInterval أو setTimeout التقليديين. تعتبر هذه التقنية مفيدة بشكل خاص عند التعامل مع الرسوم المتحركة المتكررة أو عمليات JavaScript الثقيلة التي قد تؤدي إلى إبطاء واجهة المستخدم.