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

Pete LePage

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

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

สรุป

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

ปลายสายข้างไหนเป็นปลายสาย

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

เฟรมพิกัด Earth

เฟรมพิกัด Earth ซึ่งอธิบายด้วยค่า 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!';
}

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

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

โดยปกติแล้ว เหตุการณ์จะแสดงผลพร็อพเพอร์ตี้ 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;
}

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

ความคิดเห็น