เหตุการณ์การเคลื่อนไหวและการวางแนวของอุปกรณ์ช่วยให้สามารถเข้าถึงฟีเจอร์ในตัว ตัวตรวจวัดความเร่ง เครื่องวัดการหมุน และเข็มทิศในอุปกรณ์เคลื่อนที่
เหตุการณ์เหล่านี้ใช้เพื่อวัตถุประสงค์หลายอย่าง ในเกม เช่น เพื่อควบคุม ทิศทางหรือการกระทำของตัวละคร เมื่อใช้กับตำแหน่งทางภูมิศาสตร์ มิติข้อมูลนี้สามารถ ช่วยสร้างการนำทางแบบเลี้ยวต่อเลี้ยวที่แม่นยำยิ่งขึ้น หรือให้ข้อมูลเกี่ยวกับ สถานที่ตั้งที่เฉพาะเจาะจง
สรุป
- ตรวจจับด้านใดด้านหนึ่งของอุปกรณ์และการหมุนอุปกรณ์
- ดูว่าควรตอบสนองต่อเหตุการณ์การเคลื่อนไหวและการวางแนวเมื่อใดและอย่างไร
ปลายสายข้างไหนเป็นปลายสาย
หากต้องการใช้ข้อมูลที่การวางแนวของอุปกรณ์และเหตุการณ์การเคลื่อนไหวแสดงผล คุณจำเป็นต้องเข้าใจค่าที่ระบุ
เฟรมพิกัด Earth
เฟรมพิกัด Earth ซึ่งอธิบายโดยค่า X
, Y
และ Z
อยู่ในแนวเดียวกัน
ขึ้นอยู่กับแรงโน้มถ่วงและการวางแนวแม่เหล็กมาตรฐาน
ระบบพิกัด | |
---|---|
X |
หมายถึงทิศทางตะวันออก-ตะวันตก (ที่ตะวันออกเป็นค่าบวก) |
Y |
หมายถึงทิศเหนือ-ใต้ (โดยที่ทิศเหนือเป็นค่าบวก) |
Z |
หมายถึงทิศทางขึ้นลง ตั้งฉากกับพื้น (เมื่อขึ้นเป็นบวก) |
เฟรมพิกัดของอุปกรณ์
![ภาพของเฟรมพิกัดของอุปกรณ์](https://web.dev/static/articles/device-orientation/image/illustration-device-coor-9952f2421cc29.png?authuser=19&hl=th)
เฟรมพิกัดของอุปกรณ์ ซึ่งอธิบายด้วยค่า x
, y
และ z
อยู่ในแนวเดียวกัน
โดยอิงจากจุดกึ่งกลางของอุปกรณ์
ระบบพิกัด | |
---|---|
X |
ในระนาบของหน้าจอ ให้บวกไปทางขวา |
Y |
ในระนาบของหน้าจอ ให้บวกขึ้นไปทางด้านบน |
Z |
ตั้งฉากกับหน้าจอหรือแป้นพิมพ์ ขยายเป็นบวก ได้เลย |
สำหรับโทรศัพท์หรือแท็บเล็ต การวางแนวของอุปกรณ์จะอิงตาม การวางแนวของหน้าจอ สำหรับโทรศัพท์และแท็บเล็ต ข้อมูลจะอิงตามอุปกรณ์ ในโหมดภาพบุคคล สำหรับคอมพิวเตอร์เดสก์ท็อปหรือแล็ปท็อป การวางแนวคือ เมื่อเทียบกับแป้นพิมพ์
ข้อมูลการหมุนเวียน
ข้อมูลการหมุนจะแสดงผลเป็นมุมออยเลอร์ แสดงองศาของความแตกต่างระหว่างพิกัดของอุปกรณ์ และเฟรมของพิกัด Earth
อัลฟ่า
![ภาพอัลฟ่าในเฟรมพิกัดของอุปกรณ์](https://web.dev/static/articles/device-orientation/image/illustration-alpha-the-9a77d8ab9d7af.png?authuser=19&hl=th)
การหมุนรอบแกน z ค่า alpha
คือ 0° เมื่อที่ด้านบนของ
อุปกรณ์จะหันไปทางทิศเหนือโดยตรง เนื่องจากอุปกรณ์หมุนทวนเข็มนาฬิกา
ค่า alpha
จะเพิ่มขึ้น
เบต้า
![ภาพเฟรมพิกัดของอุปกรณ์](https://web.dev/static/articles/device-orientation/image/illustration-device-coor-b7e152c8a2b6d.png?authuser=19&hl=th)
การหมุนรอบแกน x ค่า beta
คือ 0° เมื่อด้านบนและ
ที่ด้านล่างของอุปกรณ์มีระยะห่างเท่ากันกับพื้นผิวโลก ค่า
จะเพิ่มขึ้นเมื่อด้านบนของอุปกรณ์เอียงไปยังพื้นผิวโลก
แกมมา
![ภาพเฟรมพิกัดของอุปกรณ์](https://web.dev/static/articles/device-orientation/image/illustration-device-coor-0377d10426e9c.png?authuser=19&hl=th)
การหมุนรอบแกน 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
จะระบุเป็นหน่วยม./วินาที2
โปรดระวังความแตกต่างระหว่างการใช้งานเบราว์เซอร์
เมื่อใดควรใช้เหตุการณ์การเคลื่อนไหวของอุปกรณ์
เหตุการณ์การเคลื่อนไหวของอุปกรณ์มีประโยชน์หลายอย่าง ตัวอย่างมีดังต่อไปนี้
- เขย่าท่าทางสัมผัสเพื่อรีเฟรชข้อมูล
- ในเกม เพื่อทำให้ตัวละครกระโดดหรือเคลื่อนไหว
- สำหรับแอปสุขภาพและการออกกำลังกาย
ตรวจหาการสนับสนุนและรับฟังเหตุการณ์
หากต้องการฟัง DeviceMotionEvent
ก่อนอื่นให้ดูว่าเหตุการณ์
ที่ได้รับการสนับสนุนในเบราว์เซอร์ แล้วแนบ Listener เหตุการณ์ลงใน window
กำลังฟังออบเจ็กต์สำหรับ devicemotion
เหตุการณ์
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
จัดการเหตุการณ์การเคลื่อนไหวของอุปกรณ์
เหตุการณ์การเคลื่อนที่ของอุปกรณ์เริ่มทํางานในช่วงเวลาปกติ และแสดงข้อมูลเกี่ยวกับ การหมุน (เป็น°/วินาที) และการเร่ง (เป็นเมตร/วินาที2) ของอุปกรณ์ได้เป็นอย่างดี อุปกรณ์บางเครื่องไม่มีฮาร์ดแวร์ เพื่อไม่ให้เกิดผลกระทบจากแรงโน้มถ่วง
เหตุการณ์จะแสดงพร็อพเพอร์ตี้ 4 รายการ
accelerationIncludingGravity
acceleration
ซึ่งไม่รวมถึงผลกระทบของ
Gravity, 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;
}
หลังจากแตะปุ่ม "ไป" ระบบจะแจ้งให้ผู้ใช้ข้าม ในช่วงเวลาดังกล่าว หน้าเว็บจัดเก็บค่าการเร่งความเร็วสูงสุด (และต่ำสุด) และอยู่หลัง กระโดด เพื่อบอกผู้ใช้ว่าถึงการเร่งความเร็วสูงสุด