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