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

Pete LePage

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

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

สรุป

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

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

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

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

เฟรมพิกัดโลกที่อธิบายโดยค่า 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/วินาที² โปรดทราบว่าการใช้งานเบราว์เซอร์แต่ละประเภทมีความแตกต่างกัน

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

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

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

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

หากต้องการฟัง 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;
}

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

ความคิดเห็น