Cihaz Yönü ve Hareket

Pete LePage

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 yol tarifleri oluşturmanıza yardımcı olabilir veya belirli bir konum hakkında bilgi sağlayabilir.

Özet

  • Cihazın hangi tarafının yukarı baktığını 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ı bakıyor?

Cihaz yönü ve hareket etkinliklerinin döndürdüğü verileri kullanmak için sağlanan değerleri anlamak önemlidir.

Dünya koordinat sistemi

X, Y ve Z değerleriyle açıklanan Dünya koordinat çerçevesi, yerçekimine ve standart manyetik yönelime 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ünü temsil eder (yukarı yön pozitiftir).

Cihaz koordinat çerçevesi

Cihaz koordinat çerçevesini gösteren görsel
Cihaz koordinat çerçevesinin resmi

x, y ve z değerleriyle açıklanan cihaz koordinat çerçevesi, cihazın ortasına göre hizalanır.

Koordinat sistemi
X Ekranın düzleminde, sağa doğru pozitif.
Y Ekranın düzleminde, pozitif değer üst tarafa doğrudur.
Z Ekran veya klavyeye dik, pozitif değer uzaklaşır.

Telefon veya tablette cihazın yönü, ekranın normal yönüne bağlıdır. Telefon ve tabletlerde, cihazın dikey modda olması gerekir. Masaüstü veya dizüstü bilgisayarlarda yön, klavyeyle ilişkili olarak değerlendirilir.

Rotasyon verileri

Dönme verileri, cihaz koordinat çerçevesi ile Dünya koordinat çerçevesi arasındaki derece farkı sayısını temsil eden bir Euler açısı olarak döndürülür.

Alfa

Cihaz koordinat çerçevesindeki alfa değerini gösteren görsel
Cihaz koordinat çerçevesindeki alfa gösterimi

z ekseni etrafında dönme. Cihazın üst kısmı doğrudan kuzeye baktığında alpha değeri 0° olur. Cihaz saat yönünün tersine döndürüldükçe alpha değeri artar.

Beta

cihaz koordinat çerçevesinin resmi
Cihaz koordinat çerçevesindeki beta gösterimi

X ekseni etrafında dönme. Cihazın üst ve alt kısmı yer yüzeyine eşit uzaklıkta olduğunda beta değeri 0° olur. Cihazın üst kısmı dünyanın yüzeyine doğru eğildiğinde değer artar.

Gama

cihaz koordinat çerçevesinin resmi
Cihaz koordinat çerçevesindeki gama gösterimi

Y ekseni etrafında dönme. Cihazın sol ve sağ kenarları yerküre yüzeyine eşit uzaklıkta olduğunda gamma değeri 0° olur. Sağ taraf dünya yüzeyine doğru eğildiğinde değer artar.

Cihazın yönü

Cihaz yönü etkinliği, cihazın öne ve arkaya, yana ve yana ne kadar eğildiğini ve telefon veya dizüstü bilgisayarda pusula varsa cihazın baktığı yönü içeren döndürme verilerini döndürür.

Az miktarda kullanın. Destek için test yapın. Kullanıcı arayüzünü her oryantasyon 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. Örnekler arasında aşağıdakiler sayılabilir:

  • Kullanıcı hareket ettikçe haritayı güncelleyin.
  • Paralaks efektleri ekleme gibi küçük kullanıcı arayüzü düzenlemeleri.
  • Coğrafi konumla birlikte adım adım navigasyon için kullanılabilir.

Destek olup olmadığını kontrol etme ve etkinlikleri dinleme

DeviceOrientationEvent etkinliğini 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 hareket ettiğinde veya yön değiştirdiğinde cihaz yönü etkinliği tetiklenir. Dünya koordinat çerçevesine göre mevcut konumundaki cihaz ile bu çerçeve arasındaki fark hakkında veri 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 öne ve arkaya, yana ve yana ne kadar eğildiğini ve telefon veya dizüstü bilgisayarda pusula varsa cihazın baktığı yönü içeren döndürme verilerini döndürür.

Cihazın mevcut hareketinin gerekli olduğu durumlarda cihaz hareketini kullanın. rotationRate, °/sn. cinsinden sağlanır. acceleration ve accelerationWithGravity, m/sn2 cinsinden sağlanır. Tarayıcı uygulamaları arasındaki farklılıklara dikkat edin.

Cihaz hareketi etkinlikleri ne zaman kullanılır?

Cihaz hareketi etkinliklerinin çeşitli kullanım alanları vardır. Örnekler arasında aşağıdakiler sayılabilir:

  • Verileri yenilemek için cihazı sallayın.
  • Oyunlarda karakterlerin zıplamasına veya hareket etmesine neden olmak için.
  • Sağlık ve fitness uygulamaları için.

Destek olup olmadığını kontrol etme ve etkinlikleri dinleme

DeviceMotionEvent etkinliğini dinlemek için öncelikle 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 hareket etkinliklerini işleme

Cihaz hareketi etkinliği düzenli aralıklarla tetiklenir ve o anda cihazın dönme (°/saniye cinsinden) ve ivmelenme (m/saniye2 cinsinden) değerleriyle ilgili veriler döndürür. Bazı cihazlarda yerçekimi etkisini ortadan kaldıracak donanım bulunmaz.

Etkinlik, yerçekiminin etkilerini hariç tutan accelerationIncludingGravity, acceleration, rotationRate ve interval olmak üzere dört özellik döndürür.

Örneğin, ekranı yukarı bakacak şekilde düz bir masanın üzerine yerleştirilmiş bir telefona bakalım.

Eyalet Döndürme İvme (m/s2) Yer çekimi ivmesi (m/s2)
Hareket etmiyor [0, 0, 0] [0, 0, 0] [0, 0, 9,8]
Yukarı doğru hareket ettirin [0, 0, 0] [0, 0, 5] [0, 0, 14,81]
Yalnızca sağa hareket ediyor [0, 0, 0] [3, 0, 0] [3, 0, 9,81]
Yukarı ve sağa hareket ediyor [0, 0, 0] [5, 0, 5] [5, 0, 14,81]

Buna karşılık, telefon ekranı yere dik olacak ve izleyiciye doğrudan görünecek şekilde tutulduysa:

Eyalet Döndürme İvme (m/s2) Yer çekimi ivmesi (m/s2)
Hareket etmiyor [0, 0, 0] [0, 0, 0] [0, 9,81, 0]
Yukarı doğru hareket edin [0, 0, 0] [0, 5, 0] [0, 14,81, 0]
Yalnızca sağa hareket ediyor [0, 0, 0] [3, 0, 0] [3, 9,81, 0]
Yukarı ve sağa 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 atlaması istenir. Bu süre zarfında sayfa, maksimum (ve minimum) hızlanma değerlerini depolar ve sıçramadan sonra kullanıcıya maksimum hızlanma değerini bildirir.

Geri bildirim