Cihaz Yönü ve Hareket

Pete LePage

Cihaz hareketi ve yönlendirme etkinlikleri, mobil cihazlardaki yerleşik ivme ölçer, jiroskop ve pusulaya erişim sağlar.

Bu etkinlikler birçok amaçla kullanılabilir. Örneğin, oyunlarda bir karakterin yönünü veya eylemini kontrol etmek için kullanılabilir. Coğrafi konumla birlikte kullanıldığında daha doğru adım adım navigasyon oluşturmaya veya belirli bir konum hakkında bilgi sağlamaya yardımcı olabilirler.

Özet

  • Cihazın hangi tarafının yukarıda olduğunu ve nasıl döndüğünü algılar.
  • Hareket ve yönlendirme 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 sistemi

X, Y ve Z değerleriyle tanımlanan Dünya koordinat sistemi, yer çekimi ve standart manyetik yönlendirmeye göre hizalanır.

Koordinat sistemi
X Doğu-batı yönünü gösterir (doğu pozitif yöndür).
Y Kuzey-güney yönünü gösterir (kuzey pozitif yöndür).
Z Yerden yukarıya doğru olan yönü gösterir (yukarı pozitif yöndür).

Cihaz koordinat çerçevesi

Cihaz koordinat çerçevesinin resmi
Cihaz koordinat çerçevesinin resmi

x, y ve z değerleriyle açıklanan 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, üst kısma doğru pozitif.
Z Ekrana veya klavyeye dik, pozitif yönde uzayan.

Telefon veya tablette cihazın yönü, ekranın normal yönüne göre belirlenir. Telefon ve tabletlerde, cihazın dikey modda olması gerekir. 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 derece farkını temsil eden bir Euler açısı olarak döndürülür.

Alfa

Cihaz koordinat çerçevesindeki alfa değerinin gösterimi
Cihaz koordinat sisteminde alfa gösterimi

Z ekseni etrafında dönüş. Cihazın üst kısmı doğrudan kuzeye dönükken alpha değeri 0° olur. Cihaz saat yönünün tersine döndürüldüğünde alpha değeri artar.

Beta

Cihaz koordinat çerçevesinin resmi
Cihaz koordinat sisteminde beta'nın gösterimi

X ekseni etrafındaki dönüş. Cihazın üst ve alt kısımları yeryüzünden eşit uzaklıkta olduğunda beta değeri 0° olur. Cihazın üst kısmı dünyanın yüzeyine doğru eğildikçe değer artar.

Gama

Cihaz koordinat çerçevesinin resmi
Cihaz koordinat çerçevesinde gama değerinin gösterimi

Y ekseni etrafında dönüş. Cihazın sol ve sağ kenarları yeryüzünden eşit uzaklıkta olduğunda gamma değeri 0° olur. Sağ taraf dünyanın yüzeyine doğru eğildikçe değer artar.

Cihazın yönü

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

Dikkatli kullanın. Destek için test edin. Kullanıcı arayüzünü her yönlendirme etkinliğinde güncellemek 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ü değişiklikleri.
  • Coğrafi konumla birlikte adım adım navigasyon için kullanılabilir.

Desteği kontrol etme ve etkinlikleri dinleme

DeviceOrientationEvent dinlemek için öncelikle 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ştiğinde tetiklenir. Cihazın Dünya koordinat çerçevesine göre mevcut konumundaki 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<0x0x0A>webkitCompassHeading <0x0x0A>döndürülür.

Cihaz hareketi

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

Cihazın mevcut hareketinin gerektiği 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ıkları göz önünde bulundurun.

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 telefonu sallama hareketi.
  • Oyunlarda karakterlerin zıplamasını veya hareket etmesini sağlamak için
  • Sağlık ve fitness uygulamaları için.

Desteği kontrol etme ve etkinlikleri dinleme

DeviceMotionEvent dinlemek için öncelikle etkinliklerin tarayıcıda desteklenip desteklenmediğini kontrol edin. Ardından, window nesnesine devicemotion etkinliklerini dinleyen 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önüşü (saniye başına derece cinsinden) ve ivmesi (saniye başına metre2 cinsinden) hakkında veriler döndürür. Bazı cihazlarda yer çekiminin etkisini ortadan kaldıracak donanım bulunmaz.

Etkinlik, yer çekimi, rotationRate ve interval etkilerini hariç tutan dört özellik (accelerationIncludingGravity, acceleration) döndürür.

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

Eyalet Döndürme İvme (m/s2) Yer çekimi ivmesi (m/sn2)
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]

Bunun aksine, telefon ekranı yere dik olacak ve izleyici tarafından doğrudan görülecek şekilde tutulursa:

Eyalet Döndürme İvme (m/s2) Yer çekimi ivmesi (m/sn2)
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;
}

Kullanıcı, Hadi! düğmesine dokunduktan sonra zıplaması için yönlendirilir. Bu süre zarfında sayfa, maksimum (ve minimum) hızlanma değerlerini depolar ve atlamadan sonra kullanıcıya maksimum hızlanmasını bildirir.

Geri bildirim