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 bir adım adım navigasyon 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çta?

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ı çerçevesi yerçekimine ve standart manyetik yöne göre hizalanır.

Koordinat sistemi
X Doğu-batı yönünü gösterir (doğu pozitif olduğunda).
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çevesi görseli

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

Koordinat sistemi
X Ekran düzleminde, sağa doğru pozitif.
Y Ekranın düzleminde, pozitif değer üst tarafa doğrudur.
Z Ekrana veya klavyeye dik, pozitif yönde genişler.

Telefon veya tablette cihazın yönü, ekranın tipik yönüne göre belirlenir. Telefon ve tabletlerde bu, cihazın dikey modda olduğuna bağlıdır. 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çevesinde alfa resmi

z ekseni etrafında dönme. Cihazın üst kısmı doğrudan kuzeye doğru tutulduğunda 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çevesinde beta resmi

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çevesinde gama görseli

Y ekseni etrafındaki dönme. Cihazın sol ve sağ kenarları dünya yüzeyinden 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 önden arkaya ve bir yandan diğer yana yaslandığını ve telefonun ya da dizüstü bilgisayarın pusulası varsa cihazın baktığı yönü içeren döndürme verilerini döndürür.

Az kullanın. Destek için test yapın. Her yönlendirme etkinliğinde kullanıcı arayüzünü 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 şunlar yer alır:

  • Kullanıcı hareket ettikçe haritayı güncelleyin.
  • Kullanıcı arayüzünde ufak değişiklikler (ör. paralaks efektleri eklemek)
  • Coğrafi konumla birleştirildiğinde, adım adım navigasyon için kullanılabilir.

Desteği kontrol etme ve etkinlikleri dinleme

DeviceOrientationEvent etkinliğini 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 hareket ettiğinde veya yönü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. Mobile Safari'de pusula başlığıyla birlikte ek bir webkitCompassHeading parametresi döndürülür.

Cihaz hareketi

Cihaz yönü etkinliği, cihazın önden arkaya ve yandan 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.

Desteği kontrol etme ve etkinlikleri dinleme

DeviceMotionEvent öğesini 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 o anda cihazın dönme (°/saniye cinsinden) ve ivmelenme (m/saniye2 cinsinden) değerleriyle ilgili veriler döndürür. Bazı cihazlar yer çekiminin etkisini ortadan kaldıracak donanıma sahip değildir.

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

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

Eyalet Döndürme İvme (m/sn2) Yer çekimi ivmesi (m/s2)
Hareket etmiyor [0, 0, 0] [0, 0, 0] [0, 0, 9,8]
Gökyüzüne doğru hareket etme [0, 0, 0] [0, 0, 5] [0, 0, 14,81]
Yalnızca sağa taşınıyor [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/sn2) Yer çekimi ivmesi (m/s2)
Hareket etmiyor [0, 0, 0] [0, 0, 0] [0, 9,81, 0]
Yukarı doğru hareket ettirin [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, 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 boyunca sayfa maksimum (ve minimum) ivme değerlerini depolar ve atlamadan sonra kullanıcıya maksimum ivme bilgilerini bildirir.

Geri bildirim