Các sự kiện chuyển động và hướng của thiết bị cung cấp quyền truy cập vào gia tốc kế, con quay hồi chuyển và la bàn tích hợp trong thiết bị di động.
Những sự kiện này có thể được dùng cho nhiều mục đích; chẳng hạn như trong trò chơi, để điều khiển hướng hoặc hành động của một nhân vật. Khi được sử dụng cùng với thông tin vị trí địa lý, các thông tin này có thể giúp tạo ra thông tin chỉ đường từng chặng chính xác hơn hoặc cung cấp thông tin về một vị trí cụ thể.
Tóm tắt
- Phát hiện mặt nào của thiết bị đang ở trên cùng và cách thiết bị xoay.
- Tìm hiểu về thời điểm và cách thức phản hồi các sự kiện chuyển động và hướng.
Đầu nào đang hướng lên?
Để sử dụng dữ liệu mà các sự kiện chuyển động và hướng thiết bị trả về, bạn cần hiểu rõ các giá trị được cung cấp.
Khung toạ độ Trái đất
Khung toạ độ Trái đất, được mô tả bằng các giá trị X, Y và Z, được căn chỉnh dựa trên trọng lực và hướng từ trường chuẩn.
| Hệ toạ độ | |
|---|---|
X |
Biểu thị hướng đông-tây (trong đó đông là dương). |
Y |
Biểu thị hướng bắc-nam (trong đó hướng bắc là dương). |
Z |
Đại diện cho hướng lên xuống, vuông góc với mặt đất (trong đó hướng lên là số dương). |
Khung toạ độ thiết bị
Khung toạ độ của thiết bị, được mô tả bằng các giá trị x, y và z, được căn chỉnh dựa vào tâm của thiết bị.
| Hệ toạ độ | |
|---|---|
X |
Trong mặt phẳng màn hình, giá trị dương ở bên phải. |
Y |
Trong mặt phẳng của màn hình, hướng về phía trên cùng. |
Z |
Vuông góc với màn hình hoặc bàn phím, dương tính kéo dài ra xa. |
Trên điện thoại hoặc máy tính bảng, hướng của thiết bị dựa trên hướng thông thường của màn hình. Đối với điện thoại và máy tính bảng, giá trị này dựa trên thiết bị đang ở chế độ dọc. Đối với máy tính để bàn hoặc máy tính xách tay, hướng được xem xét liên quan đến bàn phím.
Dữ liệu xoay
Dữ liệu xoay được trả về dưới dạng góc Euler, đại diện cho số độ chênh lệch giữa khung toạ độ của thiết bị và khung toạ độ của Trái Đất.
Alpha
Quay xung quanh trục z. Giá trị alpha là 0° khi đầu thiết bị hướng thẳng về phía bắc. Khi thiết bị được xoay ngược chiều kim đồng hồ, giá trị alpha sẽ tăng lên.
Beta
Xoay xung quanh trục x. Giá trị beta là 0° khi phần đầu và phần đáy của thiết bị cách đều với bề mặt trái đất. Giá trị này tăng lên khi phần đầu của thiết bị nghiêng về phía bề mặt trái đất.
Gama
Độ xoay quanh trục y. Giá trị gamma là 0° khi các cạnh trái và phải của thiết bị cách đều bề mặt trái đất. Giá trị này tăng lên khi cạnh phải nghiêng về phía bề mặt trái đất.
Hướng của thiết bị
Sự kiện hướng thiết bị trả về dữ liệu xoay, bao gồm cả mức độ nghiêng của thiết bị từ trước ra sau, từ bên này sang bên kia và nếu điện thoại hoặc máy tính xách tay có la bàn, thì hướng thiết bị đang hướng đến.
Hãy sử dụng một cách tiết kiệm.
Thử nghiệm khả năng hỗ trợ.
Đừng cập nhật giao diện người dùng trên mọi sự kiện theo hướng; thay vào đó, hãy đồng bộ hoá với requestAnimationFrame.
Trường hợp sử dụng sự kiện liên quan đến hướng thiết bị
Có một số cách sử dụng sự kiện hướng thiết bị. Một số ví dụ bao gồm:
- Cập nhật bản đồ khi người dùng di chuyển.
- Điều chỉnh giao diện người dùng một cách tinh tế, chẳng hạn như thêm hiệu ứng thị sai.
- Được kết hợp với vị trí địa lý, có thể được sử dụng để điều hướng từng chặng.
Kiểm tra khả năng hỗ trợ và theo dõi các sự kiện
Để theo dõi DeviceOrientationEvent, trước tiên, hãy kiểm tra xem trình duyệt có hỗ trợ các sự kiện này hay không. Sau đó, hãy đính kèm trình nghe sự kiện vào đối tượng window để theo dõi các sự kiện deviceorientation.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Xử lý sự kiện hướng thiết bị
Sự kiện hướng thiết bị kích hoạt khi thiết bị di chuyển hoặc đổi hướng. Phương thức này trả về dữ liệu về độ chênh lệch giữa thiết bị ở vị trí hiện tại của thiết bị so với khung toạ độ Earth.
Sự kiện này thường trả về 3 thuộc tính: alpha, beta và gamma. Trên Mobile Safari, một tham số bổ sung webkitCompassHeading được trả về cùng với tiêu đề la bàn.
Chuyển động của thiết bị
Sự kiện hướng thiết bị trả về dữ liệu xoay, bao gồm cả mức độ nghiêng thiết bị từ trước ra sau, hướng sang hai bên và nếu điện thoại hoặc máy tính xách tay có la bàn, thì hướng mà thiết bị hướng về phía trước.
Sử dụng chuyển động của thiết bị khi cần chuyển động hiện tại của thiết bị.
rotationRate được cung cấp ở đơn vị °/giây. acceleration và accelerationWithGravity được cung cấp theo m/giây2.
Hãy lưu ý sự khác biệt giữa các cách triển khai trình duyệt.
Trường hợp sử dụng sự kiện chuyển động thiết bị
Có một số cách sử dụng sự kiện chuyển động của thiết bị. Một số ví dụ bao gồm:
- Cử chỉ lắc để làm mới dữ liệu.
- Trong trò chơi, để khiến nhân vật nhảy hoặc di chuyển.
- Dành cho các ứng dụng sức khoẻ và thể hình.
Kiểm tra khả năng hỗ trợ và nghe sự kiện
Để theo dõi DeviceMotionEvent, trước tiên, hãy kiểm tra xem các sự kiện này có được hỗ trợ trong trình duyệt hay không. Sau đó, hãy đính kèm trình nghe sự kiện vào đối tượng window để theo dõi các sự kiện devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Xử lý các sự kiện chuyển động của thiết bị
Sự kiện chuyển động thiết bị kích hoạt theo khoảng thời gian thông thường và trả về dữ liệu về độ xoay (tính bằng °/giây) và gia tốc (tính bằng m/giây2) của thiết bị tại thời điểm đó. Một số thiết bị không có phần cứng để loại trừ hiệu ứng của trọng lực.
Sự kiện này trả về 4 thuộc tính, accelerationIncludingGravity, acceleration, không bao gồm ảnh hưởng của trọng lực rotationRate và interval.
Ví dụ: hãy xem một chiếc điện thoại nằm trên một chiếc bàn phẳng, với màn hình hướng lên trên.
| Tiểu bang | Xoay | Gia tốc (m/s2) | Gia tốc có trọng lực (m/s2) |
|---|---|---|---|
| Bạn chưa di chuyển | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| Di chuyển lên bầu trời | [0, 0, 0] | [0, 0, 5] | [0, 0, 14,81] |
| Chỉ di chuyển sang phải | [0, 0, 0] | [3, 0, 0] | [3, 0, 9.81] |
| Di chuyển lên và sang phải | [0, 0, 0] | [5, 0, 5] | [5, 0, 14,81] |
Ngược lại, nếu người dùng giữ điện thoại ở vị trí màn hình vuông góc với mặt đất và người xem có thể nhìn thấy điện thoại đó:
| Tiểu bang | Xoay | Gia tốc (m/s2) | Gia tốc có trọng lực (m/s2) |
|---|---|---|---|
| Bạn chưa di chuyển | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| Di chuyển lên bầu trời | [0, 0, 0] | [0, 5, 0] | [0, 14,81, 0] |
| Chỉ di chuyển sang phải | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| Di chuyển lên và sang phải | [0, 0, 0] | [5, 5, 0] | [5, 14.81, 0] |
Mẫu: Tính gia tốc lớn nhất của một đối tượng
Một cách để sử dụng các sự kiện chuyển động của thiết bị là tính toán gia tốc tối đa của một đối tượng. Ví dụ: gia tốc tối đa của một người khi nhảy là bao nhiêu?
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;
}
Sau khi nhấn vào nút Go! (Bắt đầu), người dùng sẽ được yêu cầu nhảy. Trong thời gian đó, trang lưu trữ các giá trị tăng tốc tối đa (và tối thiểu) và sau khi chuyển, sẽ cho người dùng biết mức tăng tốc tối đa của họ.