כיוון המכשיר ותנועה

Pete LePage

אירועים של תנועה וכיוון של המכשיר מספקים גישה למד התאוצה, לג'ירוסקופ ולמצפן המובנים במכשירים ניידים.

אפשר להשתמש באירועים האלה למטרות רבות. במשחקים, למשל, כדי לשלוט בכיוון או בפעולה של דמות. כשמשתמשים בהם עם מיקום גיאוגרפי, הם יכולים לעזור ליצור ניווט מפורט מדויק יותר או לספק מידע על מיקום ספציפי.

סיכום

  • לזהות איזה צד של המכשיר פונה כלפי מעלה ואיך המכשיר מסתובב.
  • מתי ואיך להגיב לאירועי תנועה וכיוון.

איזה צד הוא למעלה?

כדי להשתמש בנתונים שמוחזרים מהאירועים של כיוון המכשיר ותנועת המכשיר, חשוב להבין את הערכים שסופקו.

מערכת קואורדינטות של כדור הארץ

מערכת הקואורדינטות של כדור הארץ, שמתוארת על ידי הערכים X,‏ Y ו-Z, מיושרת על סמך כוח הכבידה והכיוון המגנטי הסטנדרטי.

מערכת קואורדינטות
X מייצג את כיוון מזרח-מערב (כאשר מזרח הוא חיובי).
Y מייצג את הכיוון צפון-דרום (כאשר הצפון הוא חיובי).
Z מייצג את הכיוון למעלה-למטה, בניצב לקרקע (כאשר למעלה הוא חיובי).

מסגרת קואורדינטות של המכשיר

איור של מערכת הצירים של המכשיר
איור של מסגרת הקואורדינטות של המכשיר

מערכת הצירים של המכשיר, שמתוארת על ידי הערכים x,‏ y ו-z, מיושרת לפי מרכז המכשיר.

מערכת קואורדינטות
X במישור המסך, ערך חיובי מימין.
Y במישור המסך, ערך חיובי לכיוון החלק העליון.
Z בניצב למסך או למקלדת, ערכים חיוביים מתרחקים.

בטלפון או בטאבלט, כיוון המכשיר מבוסס על הכיוון הרגיל של המסך. בטלפונים ובטאבלטים, המיקום מבוסס על מכשיר במצב לאורך. במחשבים נייחים או ניידים, הכיוון נקבע ביחס למקלדת.

נתוני סיבוב

נתוני הסיבוב מוחזרים כזווית אוילר, שמייצגת את מספר המעלות של ההבדל בין מסגרת הקואורדינטות של המכשיר לבין מסגרת הקואורדינטות של כדור הארץ.

אלפא

איור של אלפא במסגרת הקואורדינטות של המכשיר
איור של אלפא במסגרת הקואורדינטות של המכשיר

הסיבוב סביב ציר Z. הערך של alpha הוא 0° כשהחלק העליון של המכשיר פונה ישירות צפונה. כשמסובבים את המכשיר נגד כיוון השעון, הערך של alpha עולה.

בטא

איור של מסגרת הקואורדינטות של המכשיר
איור של בטא במסגרת הקואורדינטות של המכשיר

הסיבוב סביב ציר X. הערך של beta הוא 0° כשהחלק העליון והחלק התחתון של המכשיר נמצאים במרחק שווה מפני כדור הארץ. הערך עולה כשהחלק העליון של המכשיר מוטה לכיוון פני כדור הארץ.

גאמה

איור של מסגרת הקואורדינטות של המכשיר
איור של גמא במסגרת הקואורדינטות של המכשיר

הסיבוב סביב ציר Y. הערך של gamma הוא 0° כשהקצוות השמאלי והימני של המכשיר נמצאים במרחק שווה מפני כדור הארץ. הערך עולה כשהצד הימני מוטה לכיוון פני כדור הארץ.

הכיוון שאליו פונה המכשיר

אירוע כיוון המכשיר מחזיר נתוני סיבוב, כולל מידת הנטייה של המכשיר מלפנים לאחור, מצד לצד, ואם לטלפון או למחשב הנייד יש מצפן, הכיוון שאליו המכשיר פונה.

צריך להשתמש בהם בזהירות. בודקים אם יש תמיכה. אל תעדכנו את ממשק המשתמש בכל אירוע של שינוי כיוון, אלא סנכרנו עם requestAnimationFrame.

מתי כדאי להשתמש באירועים של כיוון המכשיר

יש כמה שימושים לאירועים של כיוון המכשיר. לדוגמה:

  • עדכון המפה כשהמשתמש זז.
  • שינויים קלים בממשק המשתמש, למשל הוספת אפקטים של היסט.
  • בשילוב עם מיקום גיאוגרפי, אפשר להשתמש בהן לניווט מפורט.

בדיקת התמיכה והאזנה לאירועים

כדי להאזין ל-DeviceOrientationEvent, קודם צריך לבדוק אם הדפדפן תומך באירועים. לאחר מכן, מצרפים רכיב event listener לאובייקט window שמאזין לאירועי deviceorientation.

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document.getElementById('doeSupported').innerText = 'Supported!';
}

טיפול באירועים של כיוון המכשיר

אירוע כיוון המכשיר מופעל כשהמכשיר זז או משנה כיוון. הוא מחזיר נתונים על ההבדל בין המכשיר במיקום הנוכחי שלו ביחס למסגרת הקואורדינטות של כדור הארץ.

האירוע בדרך כלל מחזיר שלושה מאפיינים: alpha,‏ beta ו-gamma. ב-Safari לנייד, מוחזר פרמטר נוסף webkitCompassHeading עם כיוון המצפן.

תנועת המכשיר

אירוע כיוון המכשיר מחזיר נתוני סיבוב, כולל מידת הנטייה של המכשיר מלפנים לאחור, מצד לצד, ואם לטלפון או למחשב הנייד יש מצפן, הכיוון שאליו המכשיר פונה.

השתמשו בתנועת המכשיר כשאתם צריכים את התנועה הנוכחית של המכשיר. הערך של rotationRate מסופק במעלות לשנייה. הערכים של acceleration ו-accelerationWithGravity מסופקים במטרים לשנייה2. חשוב לשים לב להבדלים בין ההטמעות בדפדפנים השונים.

מתי כדאי להשתמש באירועי תנועה של המכשיר

יש כמה שימושים לאירועי תנועה במכשיר. לדוגמה:

  • תנועת ניעור כדי לרענן את הנתונים.
  • במשחקים, כדי לגרום לדמויות לקפוץ או לזוז.
  • לאפליקציות בריאות וכושר.

בדיקת התמיכה והאזנה לאירועים

כדי להאזין ל-DeviceMotionEvent, קודם צריך לבדוק אם האירועים נתמכים בדפדפן. לאחר מכן, מצרפים רכיב event listener לאובייקט window שמקשיב לאירועים מסוג devicemotion.

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler);
  setTimeout(stopJump, 3 * 1000);
}

טיפול באירועי תנועה במכשיר

אירוע תנועת המכשיר מופעל במרווחי זמן קבועים ומחזיר נתונים על הסיבוב (במעלות לשנייה) והתאוצה (במטרים לשנייה2) של המכשיר באותו רגע. בחלק מהמכשירים אין את החומרה שמאפשרת להחריג את השפעת כוח הכבידה.

האירוע מחזיר ארבעה מאפיינים: accelerationIncludingGravity, acceleration, שלא כולל את השפעות כוח הכבידה, rotationRate ו-interval.

לדוגמה, נניח שיש טלפון שמונח על שולחן שטוח כשהמסך פונה כלפי מעלה.

מדינה (State) סיבוב תאוצה (מ'/שנ'2) תאוצה עם כוח הכבידה (m/s2)
לא זז [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]

לעומת זאת, אם הטלפון מוחזק כך שהמסך ניצב לקרקע וגלוי ישירות לצופה:

מדינה (State) סיבוב תאוצה (מ'/שנ'2) תאוצה עם כוח הכבידה (m/s2)
לא זז [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;
}

אחרי שלוחצים על הכפתור "קדימה!", המשתמש מקבל הוראה לקפוץ. בזמן הזה, הדף שומר את ערכי התאוצה המקסימליים (והמינימליים), ואחרי הקפיצה, מציג למשתמש את התאוצה המקסימלית שלו.

משוב