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

1. مقدمة إلى واجهة برمجة تطبيقات الاهتزاز

تعد Vibration API ميزة بسيطة ولكنها قوية متوفرة في متصفحات الويب الحديثة والتي تتيح لك التحكم في وظيفة الاهتزاز للجهاز. تُستخدم واجهة برمجة التطبيقات هذه بشكل أساسي على الأجهزة المحمولة، حيث أن معظم أجهزة الكمبيوتر المكتبية لا تحتوي على ميزة الاهتزاز.

واجهة برمجة التطبيقات (API) واضحة ومباشرة وتتكون من طريقة واحدة: navigator.vibrate(). عندما يتم استدعاء هذه الطريقة، فإنها تؤدي إلى اهتزاز الجهاز لمدة محددة.

1. الاستخدام الأساسي لواجهة برمجة تطبيقات الاهتزاز

صيغة طريقة الاهتزاز () هي كما يلي:

navigator.vibrate(pattern);

هنا، يمكن أن يكون النمط:

• رقم واحد يمثل مدة الاهتزاز بالمللي ثانية.
• مجموعة من الأرقام حيث تمثل المؤشرات الفردية فترات الاهتزاز، والمؤشرات الزوجية تمثل فترات التوقف المؤقت.

على سبيل المثال:

// Vibrate for 500 milliseconds
navigator.vibrate(500);

// Vibrate for 200ms, pause for 100ms, then vibrate for 200ms again
navigator.vibrate([200, 100, 200]);

أمثلة عملية

1. اهتزاز بسيط عند النقر على الزر

لنبدأ بمثال أساسي حيث نقوم بتشغيل اهتزاز عندما ينقر المستخدم على زر.

   
   
   
       
       
       
   
   
       Vibrate
   
   

في هذا المثال، سيؤدي النقر على الزر إلى اهتزاز الجهاز لمدة 300 مللي ثانية.

1. الاهتزاز المنقوش

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

   Vibrate Pattern

في هذا المثال، سيهتز الهاتف بالنمط التالي: اهتزاز لمدة 100 مللي ثانية، توقف مؤقت لمدة 50 مللي ثانية، اهتزاز لمدة 100 مللي ثانية، توقف مؤقت لمدة 50 مللي ثانية، اهتزاز لمدة 300 مللي ثانية.

وقف الاهتزاز

لإيقاف الاهتزاز الجاري حاليًا، يمكنك استدعاء طريقة الاهتزاز () بقيمة 0 أو مصفوفة فارغة:

navigator.vibrate(0);
// Or
navigator.vibrate([]);

التحقق من دعم المتصفح

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

if ("vibrate" in navigator) {
   console.log("Vibration API is supported");
} else {
   console.log("Vibration API is not supported");
}

حالات الاستخدام في العالم الحقيقي

• الإشعارات: قم بتشغيل اهتزاز قصير عند تلقي إشعار على تطبيق الويب.
• الألعاب: تحسين تجربة المستخدم عن طريق إضافة ردود فعل اهتزازية عند التفاعل مع عناصر اللعبة.
• التنبيهات: تنبيه المستخدمين بالتحديثات أو التحذيرات الهامة باستخدام نمط اهتزاز مميز.

الاعتبارات وأفضل الممارسات

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

خاتمة

تعد Vibration API في JavaScript طريقة بسيطة ولكنها فعالة لتعزيز تفاعل تطبيقات الويب الخاصة بك، خاصة لمستخدمي الأجهزة المحمولة. سواء كنت تقوم بإنشاء لعبة، أو إنشاء إشعارات، أو مجرد إضافة القليل من الذوق إلى واجهة المستخدم الخاصة بك، فإن القدرة على تشغيل الاهتزازات يمكن أن تعمل على تحسين تفاعل المستخدم بشكل كبير. تذكر استخدام هذه الميزة بحكمة لضمان تجربة مستخدم إيجابية.
قناة التليجرام :
https://t.me/Free_Programmers