Bir Bouncing Screensaver Çarpışmaları Nasıl Hesaplar

İkna edici bir zıplayan ekran koruyucu küçük bir fizik problemidir. Nesne tutarlı bir hızda hareket etmeli, görünür sınırlara temiz bir şekilde dokunmalı, bir çarpışmadan sonra fazla hareketi korumalı, yeniden boyutlandırmaya uyum sağlamalı ve yalnızca yatay ve dikey duvarlara ulaşıldığında bir köşeyi saymalıdır. “Kreçek başına lipkineklere” bağlanma hareketi yenileme hızı veya tarayıcı iş yükü değiştiğinde başarısız olur.

Minimum Durum

Dikdörtgen bir nesne için, mağaza konumu (x, y), hız (vx, vy), nesne genişliği ve yüksekliği ve viewport genişliği ve yüksekliği. Sol üst köşe konumu temsil ediyorsa, geçerli sınırlar şunlardır:

0 ≤ x ≤ viewportWidth  - objectWidth
0 ≤ y ≤ viewportHeight - objectHeight

Rozet, tek bir merkez noktasıyla değil, görünür kutusuyla çarpışmalıdır. Rozet boyutunu değiştirmek, bu nedenle maksimum x ve y değerlerini değiştirir.

Zaman aşınmış, varsayılan bir çerçeve hızı değil

Tarayıcı, yüksek çözünürlüklü bir zaman damgası sağlar. requestAnimationFrame geri arama. Saliyesi geçmiş olan milisaniyeleri almak ve saniyelere dönüştürmek için önceki zaman damgasını çıkarın:

dt = min((now - previous) / 1000, maximumStep)
x  = x + vx * dt
y  = y + vy * dt

Hız saniyede piksel cinsinden ifade edilir. 60 Hz’lik bir ekran ve 144 Hz’lik bir ekran daha sonra aynı gerçek zamanlı olarak yaklaşık olarak aynı mesafeyi kapsar. Sıkıştırma dt Hata ayıklamadan veya duran bir ön plan çerçevesi yaptıktan sonra yürütme devam ederse büyük bir sıçramayı önler. Sayfa ayrıca yalnızca tarayıcı kısıntısına güvenmek yerine gizlendiğinde kendi döngüsünü iptal eder.

Bir duvara aşırı çekim yapın

Basit bir uygulama seti x Sınıra ve düşmanlara vx. Bu, duvarın ötesine geçen mesafeyi atar ve hareketi biraz eşitsiz hale getirir. Aşırı çekimin yansıtılması onu korur:

if (x < 0) {
  x = -x
  vx = abs(vx)
}
if (x > maxX) {
  x = maxX - (x - maxX)
  vx = -abs(vx)
}

Eşdeğer mantığı dikey olarak uygulayın. Mantıklı bir maksimum zaman adımı ile eksen başına bir yansıma normalde yeterlidir. Çok büyük bir aşırı çekim sınırlar dışında kalırken daha genel bir motor döngü yapabilir.

Köşe vuruşu olarak ne sayılır?

Bir simülasyon adımında, yatay çarpışma ve dikey çarpışma için ayrı booleansları kaydedin. Köşe sayacını sadece her ikisi de aynı adımda doğru olduğunda ekleyin. x === 0 && y === 0; yansıma adımı zaten bir geçişin gerçekleştiğini biliyor.

Bir köşe vuruşunun olasılığı başlangıç konumuna, hız oranına ve boyutlara bağlıdır. Mükemmel bir şekilde tekrarlanan bir ayrık yol köşeleri süresiz olarak kaçırabilir. Nesne boyutunu yeniden boyutlandırmak veya değiştirmek yolu değiştirir, bu nedenle bir sayaç semantiğini sıfırlamalı veya açıkça korumalıdır.

Uygulamanın cilalı hissetmesini sağlayan ayrıntılar

• Yeniden boyutlandırmada, ilgisiz bir rastgele noktaya ışınlanmadan yeni sınırlara pozisyon alın.
• Çarpışma rengini yalnızca gerçek bir duvar olayında değiştirin, x/y konumundan sürekli olarak değil.
• Özel görüntü en boy oranını koruyun ve belgeleri tür ve boyut sınırlarının ötesinde dosyaları reddedin.
• Görünür Duraklat ve Sıfırla kontrollerini öngörülebilir tutun ve Escape’in tam ekran olarak çıkmasına izin verin.
• Respect azaltılmış hareket ve gizli bir sekmede render yapmayı bırakın.
• Cap device piksel oranı için Canvas Bu nedenle yüksek yoğunluklu bir telefon aşırı bir yüzey tahsis etmez.

İçindeki davranışı deneyin Bouncing DVD Screensaver. Özel yerel görüntüler cihazı asla bırakmazken varsayılan işareti gevrek kalır.

Teknik referanslar

• MDN: istekAnimationFrame
• MDN: Tam Ekran API
• MDN: Ekran Wake Lock API

Bir hız vektörünü seçin

Bir hız kaydırıcı normalde büyüklüğü temsil ederken, yön normalleştirilmiş bir vektörden gelir. Bir açı için θ ve hız s:

vx = cos(θ) * s
vy = sin(θ) * s

Tam olarak yatay veya dikey olan bir yön asla tam yüzeyi keşfetmez, bu nedenle başlangıç açısı 90 derecelik katlara çok yakın değerlerden kaçınmalıdır. Rastgele x ve y hızı bağımsız olarak bir bileşen küçükse neredeyse düz bir yol da üretebilir. İzin verilen bir aralıktan bir açı oluşturun, ardından her iki bileşeni de türleyin.

Yatay ve dikey hız arasındaki oran, yolun tekrar edip etmediğini etkiler. İdeal sürekli geometride, bir x sınırına ve bir y sınırına geçiş zamanları çakıştığında bir köşe meydana gelir. Sonlu boyutlar ve kayan nokta adımları, kesin konum eşitliğini güvenilmez hale getirir, bu nedenle çarpışma olayları, eşitliği koordine etmeyerek, sayacı yönlendirir.

Büyük zaman adımlarını ve çoklu yansımaları ele alın

Sıkıştırma geçen zaman, sıradan animasyonu korur, ancak yeniden kullanılabilir bir motor, büyük bir adım sırasında birden fazla duvardan geçen bir nesneyi de işleyebilir. Hareket ettikten sonra, sınırların içinde yatana kadar aralık dışı koordinatları tekrar tekrar yansıtır. Döngü, kötü biçimli hal imkansız bir aralık oluşturması durumunda sıkı bir yineleme sınırına ihtiyaç duyar.

function reflect(position, velocity, maximum) {
  let hits = 0
  while ((position < 0 || position > maximum) && hits < 8) {
    if (position < 0) {
      position = -position
      velocity = Math.abs(velocity)
    } else {
      position = maximum - (position - maximum)
      velocity = -Math.abs(velocity)
    }
    hits++
  }
  return { position: clamp(position, 0, maximum), velocity, hits }
}

Üretim ekranı, gizli olduğunda muhafazakar bir maksimum zaman adımı ve duraklama kullanır, bu nedenle çok duvarlı atlamalar istisnaidir. Savunmacı işleme hala sıfırlama, hata ayıklayıcı duraklamaları ve alışılmadık tarayıcı zamanlamasını daha güvenli hale getirir.

Çarpışma olayları yönden daha fazla güç sağlar

Motor yatay ve dikey vuruşlar bildirdiğinde, render rozet rengini, artış toplam çarpışmaları artırabilir, isteğe bağlı kullanıcı özellikli bir ses oynayabilir veya köşe sayısını güncelleyebilir. Bu yan etkileri olay başına bir kez meydana gelmelidir. Renk sürekli olarak pozisyondan türemek bir gökkuşağı hareket etkisi yaratır ve artık çarpışmayı iletmez.

Ses varsayılan olarak kapalı kalır ve bir etkileşim gerektirir, çünkü tarayıcı otomatik oynatma kısıtlamaları ve kullanıcı konforu meselesi. Çok yüksek hızda hızlı çarpışmalar hızla sınırlandırılmalıdır, böylece ses ve durum duyuruları ezici hale gelmez.

İzler kasıtlı bir temizleme modeli gerektirir

Bir gevrek çerçeve tümünü temizler Canvas ve bir rozet çizer. Bir iz bunun yerine bir sonraki rozeti çizmeden önce önceki çerçeveyi yarı saydam bir arka planla kaplar. Alt alfa izleri daha uzun süre korur. Algılanan iz uzunluğu da hız ve çerçeve hızına da bağlı olduğundan, görsel olarak kararlı kalacak şekilde tanımlayın ve etki dikkat dağıtıcı ise hareket altında etkisiz hale getirin.

DOM tabanlı animasyonda, bir iz, solma elemanlarının sınırlı bir havuzu olabilir. Yeni bir düğümü sonsuza kadar eklemeyin; bu da hafızayı sızdırır ve sonunda etkileşim performansına zarar verir.

Özel metin ve resimler çarpışma sınırlarını değiştirir

Metin genişliği yazı tipi, içerik, ağırlık ve cihaz oluşturma bağlıdır. Yazı tipi mevcut olduktan sonra ölçün, kasıtlı doldurma ekleyin ve maksimum x / yi yeniden hesaplayın. Metin uzunluğunu sınırlayın, böylece görüş alanından daha geniş olamaz. Rozet bir boyuttan daha büyükse, negatif bağlılara izin vermek yerine aşağı ölçeklendirin veya merkezleyin.

İçsel boyutları güvenilir olmadan önce yerel bir görüntü deşifre edilmelidir. ScreenOrbit Sadece kabul eder PNG, , JPEG, ve , WebP yan başına 5 MB ve 4096 piksel içinde, deşifre edilen boyutları kontrol eder, en boy oranını korur ve geçici nesne URL’sini serbest bırakır. Reddediyor SVG ve HTML Aktif veya beklenmedik şekilde karmaşık yerel içeriği sterilize etmeye çalışmak yerine.

Nesneyi kaybetmeden yeniden boyutlandırın

Viewport değiştiğinde, yeni sınırları hesaplayın ve mümkün olan yerlerde göreceli konumu koruyun:

ratioX = oldMaxX > 0 ? x / oldMaxX : 0.5
ratioY = oldMaxY > 0 ? y / oldMaxY : 0.5
x = clamp(ratioX * newMaxX, 0, newMaxX)
y = clamp(ratioY * newMaxY, 0, newMaxY)

Bu, her mobil adres çubuğu değişikliği veya yönlendirme olayından sonra rastgele bir pozisyon seçmekten daha pürüzsüzdür. Yeniden boyutlandırma bir çarpışma değildir ve sayaçları artırmamalı veya renk değiştirmemelidir.

Canvas pikseller ve CSS Geometri

CSS boyutlar hareket sınırlarını tanımlar. Canvas Arka tampon, yüksek yoğunluklu bir ekran için daha büyük olabilir: Kaplanmış bir cihaz pikseli oranıyla çarpın ve çizim bağlamını ölçeklendirin, böylece koordinatlar içeride kalır CSS birimler. Ölçek olmadan, fizik ve render farklı birimler kullanır; kapak olmadan, bir 4× Telefon piksel alanının on altı katı tahsis edebilir.

Bir resim veya metin nesnesi için, HTML, dönüşüm tabanlı DOM animasyonu da mümkündür. Canvas Tahmin edilebilir sahne kompozisyonu ve hala ihracat sağlarken, DOM daha basit semantik sunabilir. Seçim, geçen zaman hareketi ve yaşam döngüsü temizliği ihtiyacını değiştirmez.

Duraklat, görünürlük ve tam ekran yaşam döngüsü

Bir animasyon-loop tanımlayıcısını koruyun. Zaten çalıştırılırken başlamak ikinci bir döngü planlamamalıdır. Duraklama, bekleyen geri aramayı iptal eder ve durumu kaydeder; Özgeçmiş, gizli süre hareket olarak ele alınmaması için önceki bir önceki zaman damgası oluşturur. Görünürlük işleyicisi aynı kuralı izler.

Tam ekran bir animasyon gereksinimi değil, bir sunum durumudur. Reddedilen veya desteklenmeyen bir tam ekran isteği gömülü önizlemeyi çalışmadan bırakmalıdır. Çıkışta, viewport yerleştikten sonra sınırları yeniden hesaplayın. Wake Lock Sayfa gizli olduğunda ayrı olarak istenir ve yayınlanır; Başarısızlık asla animasyonu engellemez.

Motoru test edin, sadece bir tane çekici çalışma değil

• Sol, sağ, üst ve alt duvarlarda doğrudan isabetler
• Eş zamanlı x/y çarpışması ve bir köşe artış
• Bitişik basamaklarda meydana gelen ve saymayan yakın korner etkileri
• Uzaklık ve işareti koruyan yansımayı aşırı çekin
• 60, 120 ve 144 Hz çarpım dizileri eşit zaman içinde eşit seyahat üreten
• Uzun duraklı bir aralık, ardından ışınlanmadan devam eden bir aralık
• Mevcut konumdan daha küçük ve seçilen nesneden daha küçük
• Türe göre yerel görüntü reddi, bayt boyutu, deşifre edilmiş boyutlar ve başarısız decode
• Bir aktif geri çağrı ile tekrarlanan sıfırlama/başlat ve hiçbir muhafaza edilmiş nesne URL’si
• Azaltılmış-hareket, klavye duraklatma, tam ekran inkar ve gizli-tab davranışı

Otomatik testler aritmetik ve durum geçişlerini kapsar; Playwright tarayıcı yaşam döngüsünü ve duyarlı geometriyi kapsar. Otuz dakikalık bir manuel stabilite çalışması kontrol eder Canvas boyut, bellek ve döngü sayısı sabit kalır.

Azaltılmış hareketin ötesinde erişilebilirlik

Duraklat, Sıfırla ve Tam Ekran, normal sayfa görünümünde görünür klavye odağı ve metin etiketlerine ihtiyaç duyar. Çarpışma sayısı, bir ekran okuyucuya yapılan her hitte açıklanmamalıdır; bu, kullanılamaz sohbetleyiciyi oluşturur. Durum duyuruları anlamlı kontrol değişiklikleri için ayrılmıştır. Dokunmatik hedefler en az 44’e kadar kalır. CSS pikseller ve gömülü önizleme, çevreleyen kontrollerden klavye işlemini çalmaz.

Neden bir köşe bu kadar uzun sürebilir?

Mükemmel deterministik bir dikdörtgende, konum ve hız tekrar eden bir yörünge üretebilir. Etkili seyahat genişliğinin yükseklik ve hız bileşenlerine oranına bağlı olarak, bu yörünge hızlı bir şekilde bir köşeyle karşılaşabilir, ancak birçok sıçramadan sonra veya pratik zaman içinde değil. Piksel yuvarlama, yeniden boyutlandırma, rozet boyutunu değiştirme ve hız ayarlamaları yolu değiştirir.

Nadirencilik temyizin bir parçasıdır. Sayaç, bir köşe üretmek için tasarlanmış bir zamanlayıcı değil, dürüst bir olay kaydıdır. Sıfırlama, başlangıç durumunun bilinmesini sağlar; bir vuruş vaat etmez.

Bu sayfayı bir açık görev için kullanın

Çerçeve zamanlamasını, duvar çarpışmasını, yeniden boyutlandırmayı ve yudumlama sahnesinin arkasındaki köşe vuruş kurallarını açıklayın. Web geliştiricileri, öğrenciler, yayıncılar ve meraklı kullanıcılar bu kılavuzu görünür animasyon davranışını doğrulamak için kullanırlar. Bir bağlantıyı takip etmeden veya bir ayarı değiştirmeden önce ihtiyacınız olan sonucu yazın. Dar bir hedef zaman tasarrufu sağlar ve nihai kararı kanıtlara bağlı tutar.

Görev bir ekran testi, temizleme adımı, simülasyon, dosya hakkı, gizlilik isteği veya destek raporu içerdiğinde oyunculuktan önce bir kez tam sayfayı okuyun. Ardından iş için gereken tam bölüme dönün. Bir sonraki adıma karar verirken belirtilen sınırları görünür tutun. Bu rotaya odaklanır: Çerçeve zamanlamasını, duvar çarpışmasını, yeniden boyutlandırmayı ve yığılma sahnesinin arkasındaki köşe vuruş kurallarını açıklayın.

İstikrarlı bir başlangıç noktası hazırlayın

Çalışmaları karşılaştırmadan önce sabit bir viewport, rozet boyutu, hız ve başlangıç noktası seçin. Bir kontrolü değiştirmeden önce başlangıç durumunu kaydedin, bir cihazı hareket ettirin, bir form gönderin veya bir politika bildirimine güvenin. Geçerli kaynak materyalini ve geçerli sayfa sürümünü herhangi bir resmi inceleme için kullanın.

Oturum veya mesaj başına bir sorun tutun. Bir görsel semptomu bir donanım talebinden ayırın. Bir tarayıcı simülasyonunu bir sistem etkinliğinden ayırın. Oluşturulan bir dosyayı dosyanın içine yerleştirilen üçüncü taraf materyalinden ayırın. Bu sınırlar kanıtın değerlendirilmesini kolaylaştırır. Ana rota riski: Çerçeve-say-konla hareketi 60 Hz ve 120 Hz ekranlarda farklı hızlarda çalışır.

Pratik bir dört bölümlü işlemi izleyin

1. Hedefi tanımla. Çerçeve zamanlamasını, duvar çarpışmasını, yeniden boyutlandırmayı ve zıplayan sahnenin arkasındaki köşe vuruş kurallarını açıklayın. Görev farklı bir soruna dönüşürse durun.
2. Temel hattını yakalayın. Kayıt görünümü boyutu, cihaz piksel oranı, geçen zaman, konum, hız, çarpışma sayısı ve yeniden boyutlandırma olayı. Var oldukları yerde tam değerler ve isimler kullanın.
3. Ana riski kontrol edin. Çerçeve-kont hareketi 60 Hz ve 120 Hz ekranlarda farklı hızlarda çalışır. Adımı tekrarlamadan önce kurulumu düzeltin.
4. Bir sonraki eylemi seçin. DVD Screensaver’ı açın, bir kontrolü değiştirin ve canlı sayacı kılavuzdaki formüllerle karşılaştırın. Karşılaştırma için orijinal kaydı tutun.

Başka birinin anladığı kanıtları inşa et

Kayıt görünümü boyutu, cihaz piksel oranı, geçmiş zaman, konum, hız, çarpışma sayısı ve yeniden boyutlandırma olayı. Tarih ve sayfa URL’sini ekleyin. Bir ekran görüntüsü veya raporu paylaşmadan önce parolaları, adresleri, seri numaraları, ödeme verilerini, özel mesajları ve gizli günlükleri kaldırın. Kısa bir yazılı dizi genellikle bir yakın fotoğraftan daha fazla değer taşır.

Karşılaştırma için, aynı sırayı tekrarlayın ve her bir değişkeni sabit tutun. Bir politika veya hak sorusu için, kendi kelimelerinizdeki tam dosyayı veya maddesinden alıntı yapın ve kaynağı bağlayın. Bir hata için, beklenen davranışı, gözlemlenen davranışı ve en küçük güvenilir üreme yolunu içerir. Bu rota, kayıt yapmanızı ister: Kayıt görünümü boyutu, cihaz piksel oranı, geçen zaman, konum, hız, çarpışma sayısı ve yeniden boyutlandır etkinliği.

Zayıf kanıtlardan ve belirsiz iddialardan kaçının

• Çerçeve-count hareketi 60 Hz ve 120 Hz ekranlarında farklı hızlarda çalışır.
• Bir tarayıcı animasyonu geometri ve zamanlama gösterir. Sayfa fiziksel sürtünme veya etkiyi modellemez.
• Temel ve sonuç arasındaki birkaç ayar değişikliğinden kaçının. Bu rota için hazırlık: Koşuları karşılaştırmadan önce sabit bir viewport, rozet boyutu, hız ve başlangıç noktası seçin.
• Mevcut bir birincil kaynak olmadan özel veya modele özgü bir iddiadan kaçının. Sayfa sınırı şudur: Bir tarayıcı animasyonu geometri ve zamanlama gösterir. Sayfa fiziksel sürtünme veya etkiyi modellemez.
• Genel ekran görüntüleri, bağlantılar, örnekler ve destek mesajlarındaki özel verilerden kaçının. Yararlı kanıtlar şunlardır: Kayıt görünüm boyutu, cihaz piksel oranı, geçen zaman, konum, hız, çarpışma sayısı ve yeniden boyutlandırma olayı.
• Bir arama sonucunu, kamera görüntüsünü veya forum yorumunu nihai kanıt olarak tedavi etmekten kaçının. Ana risk şudur: Çerçeve sayı hareketi 60 Hz ve 120 Hz ekranlarında farklı hızlarda çalışır.

Bir sonraki yararlı eyleme geçin

DVD Screensaver’ı açın, bir kontrolü değiştirin ve canlı sayac’ı kılavuzdaki formüllerle karşılaştırın. Temel çizgiyi ve sayfanın sonucunun yanında tutun. İlgili üretici, satıcı, platform, uzman, hak sahibi veya ScreenOrbit Kararın sayfa kapsamının dışına çıkmasıyla editör.