דף זה תורגם על ידי Cloud Translation API.

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

Pete LePage

אירועי תנועה וכיוון של המכשיר מספקים גישה למדדי ה-accelerometer,‏ gyroscope ו-compass המובנים במכשירים ניידים.

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

סיכום

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

מה מסתיים?

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

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

מסגרת הקואורדינטות של כדור הארץ, שמתוארת על ידי הערכים 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. ב-Mobile Safari, הפרמטר הנוסף webkitCompassHeading מוחזר עם כיוון המצפן.

תנועת המכשיר

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

משתמשים בתנועת המכשיר כשצריך את התנועה הנוכחית של המכשיר. הערך של rotationRate מוצג ב-°/sec. הערכים של acceleration ו-accelerationWithGravity מוצגים ב-m/sec². חשוב לזכור את ההבדלים בין הטמעות בדפדפנים.

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

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

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

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

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

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

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

אירוע התנועה במכשיר מופעל במרווחי זמן קבועים ומחזיר נתונים לגבי הסיבוב (ב- °/שנייה) והתאוצה (באלפיות השנייה²) של המכשיר, באותו זמן. למכשירים מסוימים אין את החומרה שמאפשרת להחריג את השפעת כוח הכבידה.

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

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

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

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

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

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