Kejadian orientasi dan gerakan perangkat menyediakan akses ke {i>built-in<i} akselerometer, giroskop, dan kompas di perangkat seluler.
Peristiwa ini dapat digunakan untuk berbagai tujuan; dalam game, misalnya, untuk mengontrol arah atau tindakan dari sebuah karakter. Ketika digunakan dengan geolokasi, membantu menciptakan navigasi belokan demi belokan yang lebih akurat atau memberikan informasi tentang lokasi tertentu.
Ringkasan
- Deteksi sisi mana yang di atas perangkat dan bagaimana perangkat berputar.
- Mempelajari kapan dan bagaimana merespons peristiwa gerakan dan orientasi.
Sisi mana yang di atas?
Untuk menggunakan data yang dikembalikan oleh orientasi perangkat dan kejadian gerakan, penting untuk memahami nilai-nilai yang diberikan.
Bingkai koordinat Earth
Bingkai koordinat Earth, yang dijelaskan oleh nilai X, Y, dan Z, disejajarkan
berdasarkan gravitasi dan orientasi magnet standar.
| Sistem koordinat | |
|---|---|
X |
Mewakili arah timur-barat (timur adalah positif). |
Y |
Mewakili arah utara-selatan (utara bernilai positif). |
Z |
Mewakili arah atas-bawah, tegak lurus dengan tanah (di mana atas adalah positif). |
Frame koordinat perangkat
Bingkai koordinat perangkat, yang dijelaskan oleh nilai x, y, dan z, disejajarkan
berdasarkan bagian tengah perangkat.
| Sistem koordinat | |
|---|---|
X |
Pada bidang layar, positif di sebelah kanan. |
Y |
Pada bidang layar, positif ke arah atas. |
Z |
Tegak lurus dengan layar atau keyboard, memanjang positif pergi. |
Pada ponsel atau tablet, orientasi perangkat didasarkan pada orientasi layar. Untuk ponsel dan tablet, didasarkan pada perangkat berada dalam mode potret. Untuk komputer {i>desktop<i} atau laptop, orientasinya adalah dipertimbangkan untuk {i>keyboard<i}.
Data rotasi
Data rotasi ditampilkan sebagai sudut Euler, yang mewakili jumlah derajat perbedaan antara koordinat perangkat dan bingkai koordinat Bumi.
Alfa
Rotasi di sekitar sumbu z. Nilai alpha adalah 0° jika bagian atas
perangkat mengarah tepat ke utara. Saat perangkat diputar berlawanan arah jarum jam,
nilai alpha akan meningkat.
Beta
Rotasi di sekitar sumbu x. Nilai beta adalah 0° jika bagian atas dan
bagian bawah perangkat memiliki jarak yang sama dari permukaan bumi. Nilainya
meningkat saat bagian atas perangkat dimiringkan ke arah permukaan bumi.
Gama
Rotasi di sekitar sumbu y. Nilai gamma adalah 0° jika kiri dan
tepi kanan perangkat memiliki jarak yang sama dari permukaan bumi. Nilainya
meningkat saat sisi kanan dimiringkan ke arah permukaan bumi.
Orientasi perangkat
Kejadian orientasi perangkat mengembalikan data rotasi, yang mencakup berapa banyak perangkat miring dari depan ke belakang, dari sisi ke sisi, dan, jika ponsel atau laptop memiliki kompas, yaitu arah hadap perangkat.
Gunakan seperlunya.
Uji untuk mendapatkan dukungan.
Jangan mengupdate UI pada setiap peristiwa orientasi; sebagai gantinya, sinkronkan ke requestAnimationFrame.
Kapan harus menggunakan peristiwa orientasi perangkat
Ada beberapa kegunaan kejadian orientasi perangkat. Contohnya mencakup:
- Memperbarui peta seiring pengguna bergerak.
- Menghaluskan penyesuaian UI, misalnya, menambahkan efek paralaks.
- Dikombinasikan dengan geolokasi, dapat digunakan untuk navigasi belokan demi belokan.
Memeriksa dukungan dan memproses peristiwa
Untuk memproses DeviceOrientationEvent, periksa terlebih dahulu apakah browser mendukung peristiwa tersebut atau tidak. Kemudian, lampirkan pemroses peristiwa ke objek window yang memproses peristiwa deviceorientation.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Menangani peristiwa orientasi perangkat
Peristiwa orientasi perangkat diaktifkan ketika perangkat bergerak atau berubah orientasi. {i>Function<i} itu mengembalikan data tentang perbedaan antara perangkat posisinya saat ini dalam kaitannya dengan Bingkai koordinat Earth.
Peristiwa ini biasanya menampilkan tiga properti: alpha,
beta, dan gamma. Di Mobile Safari, parameter tambahan
webkitCompassHeading
ditampilkan dengan arah kompas.
Gerakan perangkat
Kejadian orientasi perangkat mengembalikan data rotasi, yang mencakup berapa banyak perangkat miring dari depan ke belakang, dari sisi ke sisi, dan, jika ponsel atau laptop memiliki kompas, yaitu arah hadap perangkat.
Gunakan gerakan perangkat ketika memerlukan gerakan perangkat saat ini.
rotationRate diberikan dalam °/dtk.
acceleration dan accelerationWithGravity diberikan dalam m/dtk2.
Perhatikan perbedaan di antara penerapan browser.
Kapan harus menggunakan peristiwa gerakan perangkat
Ada beberapa kegunaan untuk kejadian gerakan perangkat. Contohnya mencakup:
- Gestur goyang untuk menyegarkan data.
- Dalam game, untuk membuat karakter melompat atau bergerak.
- Untuk aplikasi kesehatan dan kebugaran.
Memeriksa dukungan dan memproses peristiwa
Untuk memproses DeviceMotionEvent, periksa terlebih dahulu apakah peristiwa tersebut
didukung dalam browser. Kemudian, lampirkan pemroses peristiwa ke window
objek yang memproses peristiwa devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Menangani peristiwa gerakan perangkat
Kejadian gerakan perangkat dipicu pada interval yang teratur dan mengembalikan data tentang rotasi (dalam °/detik) dan akselerasi (dalam m/detik2) perangkat, pada saat itu juga. Beberapa perangkat tidak memiliki hardware untuk mengecualikan efek gravitasi.
Peristiwa tersebut mengembalikan
empat properti,
accelerationIncludingGravity,
acceleration, yang mengecualikan efek
gravitasi, rotationRate, dan interval.
Sebagai contoh, mari kita lihat sebuah ponsel, di atas meja datar, dengan layar menghadap ke atas.
| Negara Bagian | Rotasi | Akselerasi (m/d2) | Akselerasi dengan gravitasi (m/s2) |
|---|---|---|---|
| Tidak bergerak | [0, 0, 0] | [0, 0, 0] | [0, 0, 9,8] |
| Bergerak ke atas ke langit | [0, 0, 0] | [0, 0, 5] | [0, 0, 14,81] |
| Hanya bergerak ke kanan | [0, 0, 0] | [3, 0, 0] | [3, 0, 9,81] |
| Bergerak ke atas dan ke kanan | [0, 0, 0] | [5, 0, 5] | [5, 0, 14,81] |
Sebaliknya, jika ponsel dipegang sehingga layar tegak lurus dengan bumi, dan terlihat langsung oleh penonton:
| Negara Bagian | Rotasi | Akselerasi (m/d2) | Akselerasi dengan gravitasi (m/s2) |
|---|---|---|---|
| Tidak bergerak | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| Bergerak ke atas ke langit | [0, 0, 0] | [0, 5, 0] | [0, 14,81, 0] |
| Hanya bergerak ke kanan | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| Bergerak ke atas dan ke kanan | [0, 0, 0] | [5, 5, 0] | [5, 14.81, 0] |
Contoh: Menghitung percepatan maksimum suatu objek
Salah satu cara menggunakan peristiwa gerakan perangkat adalah untuk menghitung percepatan maksimum dari objek. Misalnya, berapa percepatan maksimum seseorang melompat?
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;
}
Setelah mengetuk Go! , pengguna diminta untuk melompat. Selama waktu itu, halaman menyimpan nilai akselerasi maksimum (dan minimum), dan setelah jump, memberi tahu pengguna percepatan maksimum mereka.