Cihaz hareketi ve yönü etkinlikleri, mobil cihazlardaki yerleşik ivme ölçer, jiroskop ve pusulaya erişim sağlar.
Bu etkinlikler birçok amaç için kullanılabilir. Örneğin, oyunlarda bir karakterin yönünü veya hareketini kontrol etmek için kullanılabilir. Coğrafi konumla birlikte kullanıldığında daha doğru adım adım rota oluşturmaya yardımcı olabilir veya belirli bir konum hakkında bilgi sağlayabilir.
Özet
- Cihazın hangi tarafının yukarıda olduğunu ve cihazın nasıl döndüğünü algılar.
- Hareket ve yön etkinliklerine ne zaman ve nasıl yanıt vereceğinizi öğrenin.
Hangi uç yukarıda?
Cihaz yönü ve hareket etkinliklerinin döndürdüğü verileri kullanmak için sağlanan değerleri anlamak önemlidir.
Dünya koordinat çerçevesi
X, Y ve Z değerleriyle tanımlanan Dünya koordinat çerçevesi, yer çekimine ve standart manyetik yönlendirmeye göre hizalanır.
| Koordinat sistemi | |
|---|---|
X |
Doğu-batı yönünü temsil eder (doğu pozitiftir). |
Y |
Kuzey-güney yönünü temsil eder (kuzey pozitiftir). |
Z |
Yere dik olan yukarı-aşağı yönü temsil eder (yukarı yön pozitiftir). |
Cihaz koordinat çerçevesi
x, y ve z değerleriyle tanımlanan cihaz koordinat çerçevesi, cihazın merkezine göre hizalanır.
| Koordinat sistemi | |
|---|---|
X |
Ekran düzleminde, sağa doğru pozitif. |
Y |
Ekran düzleminde, yukarı doğru pozitif. |
Z |
Ekrana veya klavyeye dik, pozitif değerler uzağa doğru uzanır. |
Telefon veya tablette cihazın yönü, ekranın tipik yönüne göre belirlenir. Telefon ve tabletlerde, cihazın portre modunda olması temel alınır. Masaüstü veya dizüstü bilgisayarlarda yön, klavyeye göre belirlenir.
Rotasyon verileri
Dönüş verileri, cihaz koordinat çerçevesi ile Dünya koordinat çerçevesi arasındaki farkın derece cinsinden değerini temsil eden bir Euler açısı olarak döndürülür.
Alfa
Z ekseni etrafındaki dönüş. Cihazın üst kısmı doğrudan kuzeyi gösterdiğinde alpha değeri 0° olur. Cihaz saat yönünün tersine döndürüldükçe alpha değeri artar.
Beta
X ekseni etrafındaki dönüş. Cihazın üst ve alt kısımları dünya yüzeyine eşit uzaklıkta olduğunda beta değeri 0° olur. Cihazın üst kısmı Dünya yüzeyine doğru eğildikçe değer artar.
Gama
Y ekseni etrafındaki dönüş. Cihazın sol ve sağ kenarları dünya yüzeyine eşit uzaklıkta olduğunda gamma değeri 0° olur. Sağ taraf Dünya yüzeyine doğru eğildikçe değer artar.
Cihazın yönü
Cihaz yönü etkinliği, cihazın önden arkaya ve yanlara ne kadar eğildiğini ve telefon veya dizüstü bilgisayarda pusula varsa cihazın baktığı yönü içeren dönüş verilerini döndürür.
Bu seçeneği yalnızca eminseniz kullanın.
Destek için test edin.
Kullanıcı arayüzünü her yönlendirme etkinliğinde güncellemeyin. Bunun yerine requestAnimationFrame ile senkronize edin.
Cihaz yönü etkinlikleri ne zaman kullanılır?
Cihaz yönü etkinliklerinin çeşitli kullanım alanları vardır. Örnek olarak aşağıdakileri gösterebiliriz:
- Kullanıcı hareket ettikçe haritayı güncelleme
- Kullanıcı arayüzünde küçük değişiklikler (ör. paralaks efektleri ekleme)
- Coğrafi konumla birleştirildiğinde adım adım rota izleme için kullanılabilir.
Destek olup olmadığını kontrol etme ve etkinlikleri dinleme
DeviceOrientationEvent dinlemek için önce tarayıcının etkinlikleri destekleyip desteklemediğini kontrol edin. Ardından, deviceorientation etkinliklerini dinleyen window nesnesine bir etkinlik işleyici ekleyin.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Cihaz yönü etkinliklerini işleme
Cihaz yönü etkinliği, cihaz hareket ettiğinde veya yön değiştirdiğinde tetiklenir. Cihazın mevcut konumu ile Dünya koordinat çerçevesi arasındaki farkla ilgili verileri döndürür.
Etkinlik genellikle üç özellik döndürür: alpha,
beta ve gamma. Mobil Safari'de, pusula yönüyle birlikte ek bir parametre webkitCompassHeading döndürülür.
Cihaz hareketi
Cihaz yönü etkinliği, cihazın önden arkaya ve yanlara ne kadar eğildiğini ve telefon veya dizüstü bilgisayarda pusula varsa cihazın baktığı yönü içeren dönüş verilerini döndürür.
Cihazın mevcut hareketine ihtiyaç duyulduğunda cihaz hareketini kullanın.
rotationRate, °/sn. cinsinden sağlanır.
acceleration ve accelerationWithGravity, m/sn.2 cinsinden sağlanır.
Tarayıcı uygulamaları arasındaki farklara dikkat edin.
Cihaz hareketi etkinlikleri ne zaman kullanılır?
Cihaz hareketi etkinliklerinin çeşitli kullanım alanları vardır. Örnek olarak aşağıdakileri gösterebiliriz:
- Verileri yenilemek için sallama hareketi.
- Oyunlarda karakterlerin zıplamasını veya hareket etmesini sağlamak için kullanılır.
- Sağlık ve fitness uygulamaları için.
Destek olup olmadığını kontrol etme ve etkinlikleri dinleme
DeviceMotionEvent dinlemek için önce etkinliklerin tarayıcıda desteklenip desteklenmediğini kontrol edin. Ardından, devicemotion etkinliklerini dinleyen window nesnesine bir etkinlik işleyici ekleyin.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Cihaz hareketi etkinliklerini işleme
Cihaz hareketi etkinliği düzenli aralıklarla tetiklenir ve cihazın o andaki dönüşü (°/saniye cinsinden) ve ivmesi (m/saniye2 cinsinden) hakkında veri döndürür. Bazı cihazlarda yer çekimi etkisini hariç tutacak donanım yoktur.
Etkinlik dört özellik döndürür: accelerationIncludingGravity, yerçekiminin etkilerini hariç tutan acceleration, rotationRate ve interval.
Örneğin, düz bir masanın üzerinde ekranı yukarı bakacak şekilde duran bir telefonu ele alalım.
| Eyalet | Döndürme | İvme (m/sn.2) | Yer çekimiyle ivme (m/sn.2) |
|---|---|---|---|
| Hareket etmiyor | [0, 0, 0] | [0, 0, 0] | [0, 0, 9,8] |
| Gökyüzüne doğru yükselme | [0, 0, 0] | [0, 0, 5] | [0, 0, 14,81] |
| Yalnızca sağa hareket etme | [0, 0, 0] | [3, 0, 0] | [3, 0, 9,81] |
| Yukarı ve sağa doğru hareket ediyor | [0, 0, 0] | [5, 0, 5] | [5, 0, 14,81] |
Buna karşılık, telefon ekranı yere dik olacak ve izleyici tarafından doğrudan görülebilecek şekilde tutulursa:
| Eyalet | Döndürme | İvme (m/sn.2) | Yer çekimiyle ivme (m/sn.2) |
|---|---|---|---|
| Hareket etmiyor | [0, 0, 0] | [0, 0, 0] | [0, 9,81, 0] |
| Gökyüzüne doğru yükselme | [0, 0, 0] | [0, 5, 0] | [0, 14,81, 0] |
| Yalnızca sağa hareket etme | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| Yukarı ve sağa doğru hareket ediyor | [0, 0, 0] | [5, 5, 0] | [5, 14.81, 0] |
Örnek: Bir nesnenin maksimum ivmesini hesaplama
Cihaz hareketi etkinliklerini kullanmanın bir yolu, bir nesnenin maksimum ivmesini hesaplamaktır. Örneğin, zıplayan bir kişinin maksimum ivmesi nedir?
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;
}
"Başla!" düğmesine dokunduktan sonra kullanıcıdan zıplaması istenir. Bu süre boyunca sayfa, maksimum (ve minimum) ivme değerlerini depolar ve zıplamadan sonra kullanıcıya maksimum ivmesini söyler.