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

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

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, צריך קודם לבדוק אם הדפדפן תומך באירועים. לאחר מכן, צריך לצרף האזנה לאירוע לאובייקט window שמאזין ל-deviceorientation אירועים.

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

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

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

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

תנועת המכשיר

להשתמש בתנועת המכשיר למקרים שבהם יש צורך בתנועה הנוכחית של המכשיר. הערך rotationRate מופיע ביחידות של ° לשנייה. acceleration ו-accelerationWithGravity ניתנים במ"ש ². יש לשים לב להבדלים בהטמעות של דפדפנים.

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

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

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

חיפוש תמיכה והאזנה לאירועים

כדי להאזין ל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;
}

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

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

סיכום

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

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

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

נתוני סבב

אלפא

בטא

גאמה

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

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

חיפוש תמיכה והאזנה לאירועים

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

תנועת המכשיר

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

חיפוש תמיכה והאזנה לאירועים

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

דוגמה: חישוב התאוצה המקסימלית של עצם

משוב