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

Pete LePage

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

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

สรุป

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

ด้านไหนอยู่ด้านบน

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

เฟรมพิกัดโลก

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

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

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

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

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

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

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

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

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

อัลฟ่า

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

การหมุนรอบแกน 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!';
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

รัฐ การหมุน ความเร่ง (ม./วินาที2) ความเร่งเนื่องจากแรงโน้มถ่วง (ม./วินาที2)
ไม่เคลื่อนไหว [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]

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

รัฐ การหมุน ความเร่ง (ม./วินาที2) ความเร่งเนื่องจากแรงโน้มถ่วง (ม./วินาที2)
ไม่เคลื่อนไหว [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;
}

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

ความคิดเห็น