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

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

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

สรุป

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

ปลายสายใดที่เปิดอยู่

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

กรอบพิกัดของดาวเคราะห์โลก

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

ระบบพิกัด
X แสดงทิศทางตะวันออก-ตะวันตก (โดยที่ตะวันออกเป็นค่าบวก)
Y แสดงทิศทางเหนือ-ใต้ (โดยที่ทิศเหนือเป็นค่าบวก)
Z แสดงทิศทางขึ้น-ลง ซึ่งตั้งฉากกับพื้น (โดยที่ค่าบวกคือขึ้น)

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

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

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

ระบบพิกัด
X ในระนาบของหน้าจอ ค่าบวกจะอยู่ทางด้านขวา
Y ในระนาบของหน้าจอ ค่าบวกจะอยู่ที่ด้านบน
Z ตั้งฉากกับหน้าจอหรือแป้นพิมพ์ โดยค่าบวกจะยื่นออกไป

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

ข้อมูลการหมุน

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

อัลฟ่า

ภาพอัลฟ่าในเฟรมพิกัดของอุปกรณ์
ภาพอัลฟ่าในเฟรมพิกัดของอุปกรณ์

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

เบต้า

ภาพเฟรมพิกัดของอุปกรณ์
ภาพเบต้าในเฟรมพิกัดของอุปกรณ์

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

แกมมา

ภาพเฟรมพิกัดของอุปกรณ์
ภาพแกมมาในเฟรมพิกัดของอุปกรณ์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เหตุการณ์จะแสดงพร็อพเพอร์ตี้ 4 รายการ ได้แก่ accelerationIncludingGravity, acceleration ซึ่งไม่รวมผลของแรงโน้มถ่วง, rotationRate และ interval

ตัวอย่างเช่น มาดูโทรศัพท์ที่วางอยู่บนโต๊ะราบโดยหันหน้าจอขึ้น

รัฐ การหมุน การเร่ง (m/s2) การเร่งด้วยแรงโน้มถ่วง (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]

ในทางกลับกัน หากถือโทรศัพท์โดยให้หน้าจอตั้งฉากกับพื้นและผู้ชมมองเห็นหน้าจอโดยตรง ให้ทำดังนี้

รัฐ การหมุน การเร่ง (m/s2) การเร่งด้วยแรงโน้มถ่วง (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;
}

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

ความคิดเห็น