تتيح أحداث حركة الجهاز والاتجاه إمكانية الوصول إلى مقياس التسارع والجيروسكوب والبوصلة المدمجة في الأجهزة الجوّالة.
ويمكن استخدام هذه الأحداث لأغراض متعددة، في ألعاب الفيديو مثلاً للتحكّم في اتجاه أو حركة إحدى الشخصيات. وعند استخدامها مع ميزة تحديد الموقع الجغرافي، يمكنها المساعدة في إنشاء اتجاهات مفصّلة أكثر أو توفير معلومات حول موقع جغرافي معيّن.
ملخّص
- حدِّد الجانب الذي يظهر في الجهاز على الشاشة وطريقة تدويره.
- تعرَّف على وقت وكيفية الاستجابة لأحداث الحركة والاتجاه.
أي نهاية ينتهي؟
لاستخدام البيانات التي يعرضها اتجاه الجهاز وأحداث الحركة، من المهم فهم القيم المتوفرة.
إطار إحداثي للأرض
تتم محاذاة إطار إحداثي الأرض، الموصوف بالقيم X وY وZ،
بناءً على الجاذبية والاتجاه المغناطيسي القياسي.
| نظام الإدارة | |
|---|---|
X |
يمثل الاتجاه الشرقي والغربي (حيث يكون الشرق إيجابيًا). |
Y |
يمثل الاتجاه من الشمال إلى الجنوب (حيث يكون الشمال موجبًا). |
Z |
يمثل الاتجاه من أعلى لأسفل، بشكل عمودي على الأرض (حيث يكون الاتجاه لأعلى موجبًا). |
إطار تنسيق الجهاز
تتم محاذاة إطار إحداثيات الجهاز الموضح بالقيم x وy وz استنادًا إلى وسط الجهاز.
| نظام الإدارة | |
|---|---|
X |
في مستوى الشاشة، بشكل إيجابي على اليمين. |
Y |
في مستوى الشاشة، بشكل إيجابي باتجاه الجزء العلوي. |
Z |
عمودي على الشاشة أو لوحة المفاتيح، ويمكن توسيع موجبهما بعيدًا. |
على الهاتف أو الجهاز اللوحي، يستند اتجاه الجهاز إلى الاتجاه النموذجي للشاشة. بالنسبة إلى الهواتف والأجهزة اللوحية، يعتمد ذلك على وضع الجهاز في الوضع الرأسي. بالنسبة لأجهزة الكمبيوتر المكتبية أو المحمولة، يتم اعتبار الاتجاه بالنسبة للوحة المفاتيح.
بيانات التناوب
يتم عرض بيانات التدوير على شكل زاوية أويلر، التي تمثل عدد درجات الفرق بين الإطار الإحداثي للجهاز وإطار إحداثي الأرض.
إصدار أولي
الدوران حول المحور z. تكون قيمة alpha هي 0 درجة عندما يكون الجزء العلوي من الجهاز موجهًا إلى الشمال مباشرةً. وعند تدوير الجهاز عكس اتجاه عقارب الساعة، تزيد قيمة alpha.
إصدار تجريبي
التدوير حول المحور x. وتبلغ القيمة beta 0 درجة عندما يكون أعلى وأسفل الجهاز
على مسافة متساوية من سطح الأرض. وتزداد القيمة كلما تم توجيه الجزء العلوي من الجهاز نحو سطح الأرض.
غاما
الدوران حول المحور ص. وتبلغ القيمة gamma 0° عندما تكون حافتي الجهاز
اليسرى واليمنى متساوية من سطح الأرض. وتزداد القيمة مع توجيه الجانب الأيمن نحو سطح الأرض.
اتجاه الجهاز
يعرض حدث اتجاه الجهاز بيانات الدوران التي تتضمّن مقدار إمالة الجهاز من الأمام إلى الوراء أو من جانب إلى آخر، والاتجاه الذي يواجهه الجهاز إذا كان الهاتف أو الكمبيوتر المحمول يتضمّن بوصلة.
استخدِم باعتدال.
يمكنك إجراء اختبار للحصول على الدعم.
عليك عدم تحديث واجهة المستخدم في كل حدث من أحداث الاتجاه، بل المزامنة مع requestAnimationFrame بدلاً من ذلك.
حالات استخدام أحداث اتجاه الجهاز
هناك استخدامات متعددة لأحداث اتجاه الجهاز. تشمل الأمثلة ما يلي:
- تعديل الخريطة أثناء تحرك المستخدم.
- تعديلات دقيقة على واجهة المستخدم، على سبيل المثال، إضافة تأثيرات المنظر.
- إلى جانب ميزة تحديد الموقع الجغرافي، يمكن استخدام هذه الميزة للتنقّل باتّجاهات مفصّلة.
احصل على الدعم وتعرَّف على الأحداث
للاستماع إلى DeviceOrientationEvent، يُرجى التحقّق أولاً ممّا إذا كان المتصفّح يتيح إجراء الأحداث. أرفِق بعد ذلك أداة معالجة الأحداث بالكائن window الذي يرصد أحداث deviceorientation.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
التعامل مع أحداث اتجاه الجهاز
يتم تنشيط حدث اتجاه الجهاز عندما يتحرك الجهاز أو يغيّر اتجاهه. ويعرض بيانات حول الفرق بين الجهاز في موضعه الحالي في ما يتعلق بإطار إحداثي الأرض.
يعرض الحدث عادةً ثلاث سمات: alpha وbeta وgamma. في Mobile Safari، يتم عرض مَعلمة إضافية
webkitCompassHeading
مع عنوان البوصلة.
حركة الجهاز
يعرض حدث اتجاه الجهاز بيانات الدوران التي تتضمّن مقدار إمالة الجهاز من الأمام إلى الوراء أو من جانب إلى آخر، والاتجاه الذي يواجهه الجهاز إذا كان الهاتف أو الكمبيوتر المحمول يتضمّن بوصلة.
استخدِم حركة الجهاز عندما تكون الحركة الحالية للجهاز مطلوبة.
يتم توفير rotationRate بالثانية.
يتم توفير acceleration وaccelerationWithGravity بالمللي ثانية2.
يجب الانتباه إلى الاختلافات بين عمليات تنفيذ المتصفح.
حالات استخدام أحداث حركة الجهاز
هناك استخدامات متعددة لأحداث حركة الجهاز. تشمل الأمثلة ما يلي:
- إيماءة الاهتزاز لإعادة تحميل البيانات.
- في الألعاب، التسبب في قفز الشخصيات أو تحريكها
- لتطبيقات الصحة واللياقة البدنية
احصل على الدعم وتعرَّف على الأحداث
للاستماع إلى DeviceMotionEvent، تحقق أولاً من إمكانية تشغيل الأحداث
في المتصفح. يمكنك بعد ذلك إرفاق أداة معالجة الحدث بالكائن window
الذي يرصد أحداث devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
التعامل مع أحداث حركة الجهاز
يتم تنشيط حدث حركة الجهاز خلال فاصل منتظم ويعرض بيانات حول الدوران (بالدرجة/الثانية) والتسارع (بالمتر/الثانية2) للجهاز في تلك اللحظة الزمنية. بعض الأجهزة لا تحتوي على معدات لاستبعاد تأثير الجاذبية.
ويعرض الحدث أربع سمات، وهي accelerationIncludingGravity وacceleration، وتستثني تأثيرات
الجاذبية وrotationRate وinterval.
على سبيل المثال، لنلقِ نظرة على هاتف، وهو قائم على منضدة مسطحة وشاشته موجَّهة للأعلى.
| الحالة | تدوير | التسارع (م/ث2) | التسارع باستخدام الجاذبية (م/ث2) |
|---|---|---|---|
| لا يتم نقله | [0، 0، 0] | [0، 0، 0] | [0، 0، 9.8] |
| تحرّك صعودًا نحو السماء | [0، 0، 0] | [0، 0، 5] | [0، 0، 14.81] |
| الانتقال إلى اليمين فقط | [0، 0، 0] | [3، 0، 0] | [3، 0، 9.81] |
| التحرك لأعلى ولليمين | [0، 0، 0] | [5، 0، 5] | [5، 0، 14.81] |
وبالعكس، إذا تم الإمساك بالهاتف بحيث كانت الشاشة عمودية على الأرض، وكانت مرئية بشكل مباشر للمشاهد:
| الحالة | تدوير | التسارع (م/ث2) | التسارع باستخدام الجاذبية (م/ث2) |
|---|---|---|---|
| لا يتم نقله | [0، 0، 0] | [0، 0، 0] | [0، 9.81، 0] |
| تحرّك صعودًا نحو السماء | [0، 0، 0] | [0، 5، 0] | [0، 14.81، 0] |
| الانتقال إلى اليمين فقط | [0، 0، 0] | [3، 0، 0] | [3، 9.81، 0] |
| التحرك لأعلى ولليمين | [0، 0، 0] | [5، 5، 0] | [5، 14.81، 0] |
النموذج: حساب التسارع الأقصى لأحد الكائنات
تتمثل إحدى طرق استخدام أحداث حركة الجهاز في حساب أقصى تسارع لجسم ما. على سبيل المثال، ما هو الحد الأقصى لتسريع الشخص الذي يقفز؟
if (evt.acceleration.x > jumpMax.x) {
jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
jumpMax.z = evt.acceleration.z;
}
بعد النقر على الزر "انتقال!"، يتم إخبار المستخدم بالقفز. وخلال ذلك الوقت، تخزِّن الصفحة الحد الأقصى (والأدنى) لقيم التسارع، وبعد القفزة، تُطلع المستخدم على أقصى تسارع.