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

Pete LePage

Các sự kiện chuyển động và hướng của thiết bị cho phép truy cập vào gia tốc kế, con quay hồi chuyển và la bàn tích hợp sẵn trong thiết bị di động.

Những sự kiện này có thể được sử 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 tính năng định vị vị trí, các tính năng này có thể giúp tạo thông tin đ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ể.

Thận trọng: Không phải tất cả các trình duyệt đều sử dụng cùng một hệ toạ độ và có thể báo cáo các giá trị khác nhau trong những tình huống giống nhau. Tình trạng này đã cải thiện theo thời gian, nhưng hãy nhớ kiểm tra tình huống của bạn.

Tóm tắt

• Phát hiện cạnh nào của thiết bị hướng lên và cách thiết bị đang xoay.
• Tìm hiểu thời điểm và cách phản ứng với 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ề, điều quan trọng là bạn phải hiểu 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ừ tiêu chuẩn.

Hệ toạ độ
X	Đại diện cho hướng đông-tây (trong đó hướng đông là dương).
Y	Đại diện cho hướng bắc nam (trong đó 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à giá trị dương).

Khung toạ độ của thiết bị

Hình minh hoạ khung toạ độ của 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 của màn hình, dương ở bên phải.
Y	Trong mặt phẳng của màn hình, giá trị dươ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 mở rộng 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 so với bàn phím.

Dữ liệu xoay

Dữ liệu xoay được trả về dưới dạng góc Euler, thể hiện số độ chênh lệch giữa khung toạ độ của thiết bị và khung toạ độ Earth.

Alpha

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

Xoay xung quanh trục z. Giá trị alpha là 0° khi phần đỉnh của thiết bị hướng thẳng về phía Bắc. Khi xoay thiết bị ngược chiều kim đồng hồ, giá trị alpha sẽ tăng lên.

Beta

Hình minh hoạ phiên bản beta trong khung toạ độ của thiết bị

Xoay xung quanh trục x. Giá trị beta là 0° khi phần trên cùng và dưới cùng của thiết bị cách đều hai bề mặt trái đất. Giá trị này tăng khi phần đỉnh của thiết bị nghiêng về phía bề mặt trái đất.

Gama

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

Xoay xung quanh trục y. Giá trị gamma là 0° khi các cạnh bên trái và bên phải của thiết bị cách đều nhau so với bề mặt trái đất. Giá trị này 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 của thiết bị sẽ trả về dữ liệu xoay, bao gồm mức độ thiết bị nghiêng trước 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ị hướng về phía trước.

Hãy dùng một cách thận trọng. Kiểm tra khả năng hỗ trợ. Không cập nhật giao diện người dùng trong mọi sự kiện hướng; thay vào đó, hãy đồng bộ hoá với requestAnimationFrame.

Trường hợp sử dụng sự kiện hướng thiết bị

Có một số cách sử dụng cho sự kiện về 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 giao diện người dùng 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ể 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ợ những sự kiện này hay không. Sau đó, hãy đính kèm một 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 về 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ự chênh lệch 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 Mobile Safari, hệ thống sẽ trả về một tham số bổ sung webkitCompassHeading cùng với tiêu đề la bàn.

Chuyển động của thiết bị

Sự kiện hướng của thiết bị sẽ trả về dữ liệu xoay, bao gồm mức độ thiết bị nghiêng trước 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ị 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 theo °/giây. acceleration và accelerationWithGravity được cung cấp theo m/giây². Hãy lưu ý đến 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 của thiết bị

Có một số cách sử dụng cho sự kiện chuyển động trên 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, việc này khiến nhân vật nhảy hoặc di chuyển.
• 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 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 đang 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 trên thiết bị kích hoạt theo khoảng thời gian thông thường và trả về dữ liệu về chế độ xoay (tính bằng °/giây) và gia tốc (tính bằng m/giây²) 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 động của trọng lực.

Sự kiện này sẽ trả về 4 thuộc tính là accelerationIncludingGravity, acceleration, trong đó không bao gồm các tác độ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 bàn phẳng, với màn hình hướng lên trên.

Tiểu bang	Chế độ xoay	Gia tốc (m/s^2)	Gia tốc bằng trọng lực (m/s^2)
Không chuyển	[0, 0, 0]	[0, 0, 0]	[0, 0, 9,8]
Di chuyển lên về phía bầu trời	[0, 0, 0]	[0, 0, 5]	[0, 0, 14,81]
Chỉ di chuyển sang bên phải	[0, 0, 0]	[3, 0, 0]	[3, 0, 9,81]
Đang 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 điện thoại được giữ 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 điện thoại:

Tiểu bang	Chế độ xoay	Gia tốc (m/s^2)	Gia tốc bằng trọng lực (m/s^2)
Không chuyển	[0, 0, 0]	[0, 0, 0]	[0, 9,81, 0]
Di chuyển lên về phía bầu trời	[0, 0, 0]	[0, 5, 0]	[0, 14.81, 0]
Chỉ di chuyển sang bên phải	[0, 0, 0]	[3, 0, 0]	[3, 9,81, 0]
Đang 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

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 khi một người nhảy lên 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 lên. Trong thời gian đó, trang lưu trữ các giá trị tăng tốc tối đa (và tối thiểu). Sau khi chuyển, người dùng sẽ biết tốc độ tăng tốc tối đa của họ.

Ý kiến phản hồi