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

Pete LePage

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

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

סיכום

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

מה מסתיים?

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

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

מסגרת הקואורדינטות של Earth, המתוארת על ידי הערכים 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 מסופקת ב-° לשנייה. הנתונים של acceleration ו-accelerationWithGravity ניתנים ביחידות מטר/שנייה². חשוב לשים לב להבדלים בין הטמעות הדפדפן.

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

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

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

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

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

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

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

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

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

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

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

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

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

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;
}

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

משוב