Hướng thiết bị &Chuyển động

Pete LePage

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.

Bạn có thể sử dụng các sự kiện này 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 thời điểm và cách 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à 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 Biểu thị hướng lên xuống, vuông góc với mặt đất (trong đó hướng lên là dương).

Khung toạ độ thiết bị

Hình minh hoạ khung toạ độ của thiết bị
Hình minh hoạ khung toạ độ thiết bị

Khung toạ độ thiết bị, được mô tả bằng các giá trị x, y và z, được căn chỉnh dựa trên 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 màn hình, dương hướng lên trên.
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, kích thước này dựa trên thiết bị ở 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

Hình minh hoạ alpha trong khung toạ độ thiết bị
Hình minh hoạ alpha trong khung toạ độ thiết bị

Độ xoay 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

hình minh hoạ khung toạ độ thiết bị
Hình minh hoạ beta trong khung toạ độ thiết bị

Độ xoay quanh trục x. Giá trị beta là 0° khi phần trên cùng và phần dưới cùng của thiết bị cách đều bề mặt trái đất. Giá trị này tăng lên khi phần đầu thiết bị hướng về bề mặt trái đất.

Gama

hình minh hoạ khung toạ độ thiết bị
Hình minh hoạ gamma trong khung toạ độ thiết bị

Độ 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 mặt bên phải hướng về 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. Kiểm thử khả năng hỗ trợ. Đừng cập nhật giao diện người dùng trên mọi sự kiện hướng; thay vào đó, hãy đồng bộ hoá với requestAnimationFrame.

Trường hợp nên sử dụng sự kiệ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.
  • Các tinh chỉnh nhỏ về giao diện người dùng, ví dụ: thêm hiệu ứng thị sai.
  • Khi kết hợp với thông tin vị trí địa lý, bạn có thể sử dụng tính năng này để chỉ đường từng chặng.

Kiểm tra khả năng hỗ trợ và nghe sự kiện

Để nghe 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 đó, đí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ị sẽ 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ị ở vị trí hiện tại so với khung toạ độ Trái đất.

Sự kiện này thường trả về 3 thuộc tính: alpha, beta và gamma. Trên Safari dành cho thiết bị di động, một tham số bổ sung webkitCompassHeading sẽ đượ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 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.

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. 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 nên sử dụng sự kiện chuyển động của 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.
  • Đối với ứng dụng sức khoẻ và thể dục.

Kiểm tra khả năng hỗ trợ và nghe sự kiện

Để nghe DeviceMotionEvent, 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 đó, đí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ý sự kiện chuyển động của thiết bị

Sự kiện chuyển động của thiết bị sẽ kích hoạt theo một khoảng thời gian đều đặn 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, loại trừ các hiệu ứ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 do trọng lực (m/s2)
Không 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 cầm điện thoại sao cho màn hình vuông góc với mặt đất và người xem có thể nhìn thấy trực tiếp màn hình:

Tiểu bang Xoay Gia tốc (m/s2) Gia tốc do trọng lực (m/s2)
Không 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 tối đa của một vật thể

Một cách để sử dụng 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 sẽ lưu trữ các giá trị gia tốc tối đa (và tối thiểu) và sau khi người dùng nhảy, sẽ cho người dùng biết gia tốc tối đa của họ.

Phản hồi