การวางแนวของอุปกรณ์และการเคลื่อนไหว

Pete LePage

เหตุการณ์การเคลื่อนไหวและการวางแนวอุปกรณ์ช่วยให้เข้าถึงตัวตรวจวัดความเร่ง เครื่องวัดการหมุน และเข็มทิศในตัวในอุปกรณ์เคลื่อนที่ได้

เหตุการณ์เหล่านี้สามารถนำไปใช้ได้หลายวัตถุประสงค์ เช่น ในเกม เช่น เพื่อควบคุมทิศทางหรือการกระทำของตัวละคร เมื่อใช้ร่วมกับตำแหน่งทางภูมิศาสตร์ ก็จะช่วยสร้างการนำทางแบบเลี้ยวต่อเลี้ยวที่แม่นยำยิ่งขึ้นหรือให้ข้อมูลเกี่ยวกับตำแหน่งใดตำแหน่งหนึ่งโดยเฉพาะ

สรุป

• ตรวจจับว่าด้านใดของอุปกรณ์ลอยขึ้นและหมุนอุปกรณ์อย่างไร
• ดูว่าควรตอบสนองต่อเหตุการณ์การเคลื่อนไหวและการวางแนวเมื่อใดและอย่างไร

แล้วปลายทางไหนล่ะ

หากต้องการใช้ข้อมูลที่การวางแนวของอุปกรณ์และเหตุการณ์การเคลื่อนไหวแสดงผล คุณต้องทำความเข้าใจค่าที่ระบุ

เฟรมพิกัด Earth

เฟรมพิกัด Earth ซึ่งอธิบายด้วยค่า X, Y และ Z อยู่ในแนวเดียวกันตามแรงโน้มถ่วงและการวางแนวแม่เหล็กมาตรฐาน

เฟรมพิกัดของอุปกรณ์

เฟรมพิกัดของอุปกรณ์ซึ่งอธิบายด้วยค่า x, y และ z จะปรับตามกึ่งกลางของอุปกรณ์

ในโทรศัพท์หรือแท็บเล็ต การวางแนวของอุปกรณ์จะอิงตามการวางแนวหน้าจอโดยทั่วไป สำหรับโทรศัพท์และแท็บเล็ต จะขึ้นอยู่กับ อุปกรณ์ที่อยู่ในโหมดแนวตั้ง สำหรับคอมพิวเตอร์เดสก์ท็อปหรือแล็ปท็อป ระบบจะคำนึงถึงการวางแนวที่สัมพันธ์กับแป้นพิมพ์

ข้อมูลการหมุนเวียน

ข้อมูลการหมุนจะแสดงผลเป็นมุมออยเลอร์ ซึ่งแสดงจำนวนองศาความแตกต่างระหว่างเฟรมพิกัดของอุปกรณ์กับเฟรมพิกัดของ Earth

อัลฟ่า

การหมุนรอบแกน z ค่า alpha จะเป็น 0° เมื่อด้านบนของอุปกรณ์ชี้ไปทางทิศเหนือโดยตรง ขณะที่อุปกรณ์หมุนทวนเข็มนาฬิกา ค่า alpha จะเพิ่มขึ้น

เบต้า

การหมุนรอบแกน x ค่า beta คือ 0° เมื่อด้านบนและด้านล่างของอุปกรณ์ห่างจากพื้นผิวโลกเท่าๆ กัน โดยค่าจะเพิ่มขึ้นเมื่อส่วนบนสุดของอุปกรณ์หันเข้าหาพื้นผิวโลก

ค่า Gamma

การหมุนรอบแกน y ค่า gamma คือ 0° เมื่อขอบด้านซ้ายและขวาของอุปกรณ์ห่างจากพื้นผิวโลก มูลค่าจะเพิ่มขึ้นเมื่อด้านด้านขวาหันเข้าหาพื้นผิวโลก

การวางแนวของอุปกรณ์

เหตุการณ์การวางแนวของอุปกรณ์จะแสดงผลข้อมูลการหมุน ซึ่งรวมถึงระยะเวลาที่อุปกรณ์เอียงไปด้านหน้า ด้านหลัง ด้านหลัง และทิศทางที่อุปกรณ์หันไปในกรณีที่โทรศัพท์หรือแล็ปท็อปมีเข็มทิศ

ใช้เท่าที่จำเป็น ทดสอบเพื่อรับการสนับสนุน อย่าอัปเดต UI ในกิจกรรมการวางแนวทุกกิจกรรม แต่ให้ซิงค์กับ requestAnimationFrame แทน

กรณีที่ควรใช้เหตุการณ์การวางแนวอุปกรณ์

กิจกรรมการวางแนวอุปกรณ์มีประโยชน์หลายประการ ตัวอย่างมีดังต่อไปนี้

• อัปเดตแผนที่ขณะที่ผู้ใช้เคลื่อนที่
• การปรับแต่ง UI เล็กน้อย เช่น เพิ่มเอฟเฟกต์พารัลแลกซ์
• รวมกับตำแหน่งทางภูมิศาสตร์ สามารถใช้ในการนำทางแบบเลี้ยวต่อเลี้ยวได้

ตรวจหาการสนับสนุนและรอฟังเหตุการณ์

หากต้องการฟัง DeviceOrientationEvent ก่อนอื่นให้ตรวจสอบว่าเบราว์เซอร์รองรับเหตุการณ์หรือไม่ จากนั้น แนบ Listener เหตุการณ์กับออบเจ็กต์ window ซึ่งฟังเหตุการณ์ deviceorientation

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

จัดการเหตุการณ์การวางแนวอุปกรณ์

เหตุการณ์การวางแนวของอุปกรณ์เริ่มทำงานเมื่ออุปกรณ์เคลื่อนที่หรือเปลี่ยนการวางแนว โดยจะส่งคืนข้อมูลเกี่ยวกับความแตกต่างระหว่างอุปกรณ์ในตำแหน่งปัจจุบันที่สัมพันธ์กับเฟรมพิกัดของ Earth

โดยทั่วไปเหตุการณ์จะแสดงพร็อพเพอร์ตี้ 3 รายการ ได้แก่ alpha, beta และ gamma ใน Safari บนอุปกรณ์เคลื่อนที่ พารามิเตอร์เพิ่มเติม webkitCompassHeading จะแสดงพร้อมกับส่วนหัวของเข็มทิศ

การเคลื่อนไหวของอุปกรณ์

เหตุการณ์การวางแนวของอุปกรณ์จะแสดงผลข้อมูลการหมุน ซึ่งรวมถึงระยะเวลาที่อุปกรณ์เอียงไปด้านหน้า ด้านหลัง ด้านหลัง และทิศทางที่อุปกรณ์หันไปในกรณีที่โทรศัพท์หรือแล็ปท็อปมีเข็มทิศ

ใช้การเคลื่อนที่ของอุปกรณ์เมื่อจำเป็นต้องใช้การเคลื่อนที่ปัจจุบันของอุปกรณ์ มีการระบุ rotationRate ในหน่วย °/วินาที acceleration และ accelerationWithGravity จะระบุเป็นหน่วย m/วินาที² โปรดระวังความแตกต่างระหว่างการใช้งานเบราว์เซอร์

กรณีที่ควรใช้เหตุการณ์การเคลื่อนไหวของอุปกรณ์

เหตุการณ์การเคลื่อนไหวของอุปกรณ์มีประโยชน์หลายประการ ตัวอย่างมีดังต่อไปนี้

• เขย่าเพื่อรีเฟรชข้อมูล
• ในเกม เพื่อทำให้ตัวละครกระโดดหรือเคลื่อนที่
• สำหรับแอปสุขภาพและการออกกำลังกาย

ตรวจหาการสนับสนุนและรอฟังเหตุการณ์

หากต้องการฟัง DeviceMotionEvent ก่อนอื่นให้ตรวจสอบว่าเบราว์เซอร์รองรับเหตุการณ์หรือไม่ จากนั้นแนบ Listener เหตุการณ์กับออบเจ็กต์ window ที่กำลังฟังเหตุการณ์ devicemotion

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

จัดการเหตุการณ์การเคลื่อนไหวของอุปกรณ์

เหตุการณ์การเคลื่อนไหวของอุปกรณ์จะเริ่มทำงานตามช่วงเวลาปกติและแสดงผลข้อมูลเกี่ยวกับการหมุน (หน่วยเป็น °/วินาที) และความเร่ง (หน่วยเป็นเมตร/วินาที²) ของอุปกรณ์ ณ เวลานั้น อุปกรณ์บางอย่างไม่มีฮาร์ดแวร์ ที่จะยกเว้นผลกระทบจากแรงโน้มถ่วง

เหตุการณ์จะแสดงพร็อพเพอร์ตี้ 4 รายการ ได้แก่ 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;
}

หลังจากแตะปุ่ม "ไป!" ผู้ใช้จะได้รับคำแนะนำให้กระโดด ในช่วงเวลาดังกล่าว หน้าเว็บจะจัดเก็บค่าความเร่งสูงสุด (และต่ำสุด) ไว้ และหลังจากการข้ามจะบอกผู้ใช้เกี่ยวกับความเร่งสูงสุด

ความคิดเห็น