Các sự kiện về hướng và chuyển động của thiết bị cung cấp quyền truy cập vào tính năng tích hợp sẵn gia tốc kế, con quay hồi chuyển và la bàn trong thiết bị di động.
Các sự kiện này có thể được dùng cho nhiều mục đích; trong trò chơi, chẳng hạn như để kiểm soát hướng hoặc hành động của một nhân vật. Khi được sử dụng cùng với tính năng định vị vị trí, các tính năng này có thể giúp tạo điều hướ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 bên nào của thiết bị đang hướng lên và cách thiết bị đang 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ề, điều quan trọng là bạn phải hiểu rõ các giá trị được cung cấp.
Khung toạ độ Earth
Khung toạ độ Earth, đượ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ừ tiêu chuẩn.
| Hệ toạ độ | |
|---|---|
X |
Đại diện cho hướng đông-tây (trong đó hướng đông có giá trị dương). |
Y |
Đại diện cho hướng bắc-nam (trong đó hướng bắc có giá trị dương). |
Z |
Đại diện cho hướng lên xuống, vuông góc với mặt đất (trong đó giá trị tăng là số dương). |
Khung toạ độ của 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 phần ở giữa của thiết bị.
| Hệ toạ độ | |
|---|---|
X |
Trong mặt phẳng của màn hình, hướng dương về 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, kéo dài dương ngay lập tức. |
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 là 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 là xem xét liên quan đến bàn phím.
Dữ liệu xoay vòng
Dữ liệu xoay được trả về dưới dạng góc Euler, biểu thị số độ chênh lệch giữa toạ độ của thiết bị và khung toạ độ Earth.
Alpha
Quay xung quanh trục z. Giá trị alpha là 0° khi đỉnh của
thiết bị hướng thẳng về hướng Bắc. Khi thiết bị 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 đỉnh và
đáy của thiết bị cách đều bề mặt trái đất. Giá trị
tăng lên khi phần đỉnh của thiết bị nghiêng về phía bề mặt trái đất.
Gama
Xoay xung quanh trục y. Giá trị gamma là 0° khi bên trái và
các cạnh phải của thiết bị cách đều bề mặt trái đất. Giá trị
tăng lên khi cạnh bên 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 số lượng thiết bị nghiêng về phía 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, hướng của thiết bị.
Sử dụng một cách thận trọng.
Thử nghiệm khả năng hỗ trợ.
Không cập nhật giao diện người dùng đối với 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 đối với các 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ý các sự kiện liên quan đến hướng thiết bị
Sự kiện về hướng của thiết bị kích hoạt khi thiết bị di chuyển hoặc thay đổi hướng. Phương thức này trả về dữ liệu về sự khác biệt giữa thiết bị trong vị trí hiện tại của quảng cáo 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, thông số bổ sung
webkitCompassHeading
được trả về cùng với hướng 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 số lượng thiết bị nghiêng về phía 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, hướng của thiết bị.
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 theo °/giây.
acceleration và accelerationWithGravity được cung cấp theo m/giây2.
Nhận biết 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 đối với 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 lên 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à theo dõi các sự kiện
Để theo dõi DeviceMotionEvent, trước tiên hãy kiểm tra xem các sự kiện đó có
được hỗ trợ trong trình duyệt. Sau đó, hãy đính kèm một trình nghe sự kiện vào window
đối tượng đang 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 trong một 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ừ tác dụ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 hướng lên trên.
| Tiểu bang | Góc 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] |
| Đang di chuyển lên phía 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] |
| Đang di chuyển lên trê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 cầm điện thoại ở vị trí màn hình vuông góc với mà người xem có thể nhìn thấy trực tiếp:
| Tiểu bang | Góc 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] |
| Đang di chuyển lên phía 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] |
| Đang di chuyển lên trê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 sự kiện chuyển động của thiết bị là tính 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 là bao nhiêu nhảy?
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 Bắt đầu! nút bật, 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 nhảy, cho người dùng biết tốc độ tăng tốc tối đa của họ.