Cihaz hareketi ve yön etkinlikleri, mobil cihazlarda 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 gibi. Coğrafi konumla birlikte kullanıldıklarında, daha doğru adım adım navigasyonun oluşturulmasına yardımcı olabilir veya belirli bir konum hakkında bilgi sağlayabilirler.
Özet
- Cihazın hangi tarafının yukarıda olduğunu ve nasıl döndüğünü algılama.
- Hareket ve yön etkinliklerine ne zaman ve nasıl yanıt vereceğinizi öğrenin.
Hangi maç sona erdi?
Cihaz yönü ve hareket etkinliklerinin döndürdüğü verileri kullanmak için, sağlanan değerlerin anlaşılması önemlidir.
Toprak koordinatı çerçevesi
X, Y ve Z değerleriyle açıklanan 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ü temsil eder (doğu pozitiftir). |
Y |
Kuzey-güney yönünü temsil eder (kuzey yönü pozitiftir). |
Z |
Yukarı doğru, zemine dik yönde (yukarının pozitif olduğu) temsil eder. |
Cihaz koordinatı çerçevesi
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, yukarı doğru pozitif. |
Z |
Ekrana veya klavyeye dik, uzağa doğru pozitif yönde görüntülenir. |
Telefon veya tablette cihazın yönü, ekranın tipik yönüne bağlıdır. Telefonlar ve tabletler için bu, cihazın dikey modda olmasına bağlıdır. Masaüstü veya dizüstü bilgisayarlarda ise yön, klavyeye göre dikkate alınır.
Rotasyon verileri
Döndürme verileri, cihaz koordinat çerçevesi ile Dünya koordinat çerçevesi arasındaki fark derecelerinin sayısını 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österecek şekilde alpha değeri 0°'dir. 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ısmı 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ında dönme. Cihazın sol ve sağ kenarları dünya yüzeyine eşit uzaklıktaysa 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 kadar öne, yana doğru eğimli olduğunu ve telefon veya dizüstü bilgisayarın bir pusulası varsa cihazın hangi yöne baktığını içeren döndürme verileri döndürür.
Dikkatli kullanın.
Destek için test edin.
Kullanıcı arayüzünü her yön 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 biçimleri vardır. Örnek olarak şunlar verilebilir:
- Kullanıcı hareket ettikçe haritayı güncelleyin.
- Örneğin, paralaks efektleri eklemek gibi kullanıcı arayüzünde küçük değişiklikler.
- 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 hareket ettiğinde veya yönü değiştirildiğinde cihaz yönü etkinliği tetiklenir. Bu rapor, cihazın Dünya koordinat çerçevesine göre mevcut konumu arasındaki farkla ilgili verileri döndürür.
Etkinlik genellikle üç özellik döndürür: alpha, beta ve gamma. Mobil 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 ne kadar öne, yana doğru eğimli olduğunu ve telefon veya dizüstü bilgisayarın bir pusulası varsa cihazın hangi yöne baktığını içeren döndürme verileri döndürür.
Cihazda mevcut hareket gerekli olduğ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 farklılıklara dikkat edin.
Cihaz hareketi etkinlikleri ne zaman kullanılır?
Cihaz hareketi etkinliklerinin çeşitli kullanım alanları vardır. Örnek olarak şunlar verilebilir:
- Verileri yenilemek için sallama hareketi.
- Oyunlarda, karakterlerin atlamasına veya hareket etmesine neden olmak için.
- Sağlık ve fitness uygulamaları için.
Desteği kontrol etme ve etkinlikleri dinleme
DeviceMotionEvent dinlemek için öncelikle tarayıcıda etkinliklerin desteklenip desteklenmediğini kontrol edin. Ardından, devicemotion etkinlikleri için dinleme yapan 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 belirli bir andaki dönüşü (°/saniye cinsinden) ve hızlanması (m/saniye2 cinsinden) hakkında veri döndürür. Bazı cihazlar yer çekiminin etkisini engelleyecek donanıma sahip değildir.
Etkinlik, yer çekimi, rotationRate ve interval etkisini hariç tutan dört özellik (accelerationIncludingGravity, acceleration) döndürür.
Örneğin, düz bir masa üzerinde uzanmış ekranı yukarı bakan bir telefona bakalım.
| Eyalet | Döndürme | İvme (m/sn.2) | Yer çekimiyle hızlanma (m/sn2) |
|---|---|---|---|
| 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 etme | [0, 0, 0] | [5, 0, 5] | [5, 0, 14,81] |
Diğer taraftan, telefon, ekran yere dik olacak şekilde ve izleyici tarafından doğrudan görülebilecek şekilde tutuluyorsa:
| Eyalet | Döndürme | İvme (m/sn.2) | Yer çekimiyle hızlanma (m/sn2) |
|---|---|---|---|
| Hareket etmiyor | [0, 0, 0] | [0, 0, 0] | [0, 9,81, 0] |
| Gökyüzüne doğru hareket etme | [0, 0, 0] | [0, 5, 0] | [0, 14,81, 0] |
| Yalnızca sağa taşınıyor | [0, 0, 0] | [3, 0, 0] | [3, 9,81, 0] |
| Yukarı ve sağa hareket etme | [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, sıçrayan 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;
}
Git! düğmesine dokunduktan sonra kullanıcının atlaması istenir. Sayfa bu süre boyunca maksimum (ve minimum) hızlanma değerlerini depolar ve atlamadan sonra kullanıcıya maksimum ivme değerlerini bildirir.