GIF Sprite Sheet
GIF karelerini satır ve sütun düzeninde tek bir sprite sheet görselinde birleştirir. Oyun ve CSS animasyonları için; dosyan yüklenmez. Üyelik gerekmez.
GIF, APNG, WebP, AVIF · statik görseller de kabul edilir
İpuçları
- Sütun sayısını girersen satır sayısı otomatik hesaplanır ve ölçüler ekranda gösterilir.
- CSS steps() animasyonu için tek satırlık yatay dizilim en pratik olanıdır.
- Kareler arasına boşluk koyma; sprite sheet’te boşluk kaymaya yol açar.
Nasıl kullanılır?
- 1 Sprite tablosuna dönüştürmek istediğin GIF dosyasını araca aktar.
- 2 İhtiyacına göre sütun sayısını belirle veya CSS animasyonları için tek satırlık yatay dizilim oluştur.
- 3 Otomatik hesaplanan tuval ölçülerini ve kare dizilimini önizleme üzerinden kontrol et.
- 4 Birleştirilmiş sprite sheet görselini cihazına indir.
Bilmen gerekenler
Animasyonlu GIF dosyaları web ortamında yaygın olsa da oyun motorları, WebGL sahneleri veya CSS adımlı animasyonlar için doğrudan GIF döngüsü oynatmak performans kaybına yol açar. GIF formatı kareleri bağımsız zamanlamalar ve delta kodlamasıyla sıralarken, sprite sheet yaklaşımı tüm kareleri tek bir matris üzerinde birleştirir. Bu yöntem, tarayıcının her kareyi ayrı ayrı çözmek yerine tek bir doku belleği üzerinden okumasını sağlar ve CPU yükünü azaltır. CSS steps fonksiyonu ile sıfır gecikmeli animasyonlar oluşturmak veya oyun içi karakter hareketlerini piksel koordinatlarıyla tetiklemek istediğinde GIF karelerini sprite tablosuna dönüştürmek en kararlı çözümdür.
Tarayıcı motoru GIF dosyasını kare kare çözerek piksel verilerini alır ve belirlediğin sütun sayısına göre geniş bir tuval üzerine sırayla yerleştirir. Kareler arasında boşluk bırakılmadığından alt piksel kaymaları engellenir ve toplam tuval boyutu otomatik hesaplanır. GIF formatının doğasından gelen 256 renk sınırı ve ikili şeffaflık maskesi kareler birleştirilirken korunur. Çıktı tek bir büyük görsel olarak üretildiğinde toplam piksel boyutu GPU doku sınırlarını aşmamalıdır; aşırı uzun veya çok kareli dosyalarda sütun sayısını dengeleyerek kare veya yatay şerit formunda çıktı alabilirsin.
Sık sorulan sorular
Sprite sheet görselinde arka plan şeffaflığı korunur mu?
Kaynak GIF dosyasındaki 1 bitlik şeffaflık bilgisi korunarak tuvale aktarılır. Karelerin arka planındaki saydam pikseller birleştirme sırasında bozulmadan çıktıda yer alır.
CSS animasyonu için en uygun sütun sayısı kaçtır?
CSS adımlı kaydırma işlemlerinde tüm kareleri tek bir satıra dizecek şekilde kare sayısı kadar sütun belirlemek veya dikey şerit oluşturmak koordinat hesaplamasını pratikleştirir.
Yüksek kare sayılı GIF dosyalarında piksel boyutu sınırı var mı?
Tarayıcının bellek kapasitesi ve grafik işlemci doku sınırları nedeniyle üretilen görselin genişlik veya yükseklik değerinin 4096 pikseli aşmaması önerilir; çok kareli dosyalarda satır ve sütunları dengeli dağıtmak gerekir.
Rehberler
Bu araçla ilgili yazılar ve format rehberleri.
İlgili araçlar
- GIF Kare Ayırma GIF animasyonunun her karesini ayrı PNG veya JPG dosyasına çıkarır ve toplu indirir. Kareler tarayıcıda çözülür, dosyan sunucuya gitmez. Kayıt ve ücret yok.
- Sprite Sheet Kesme Sprite sheet görselini satır ve sütun sayısına göre karelere böler; ayrı dosya ya da GIF olarak verir. İşlem tarayıcıda, yükleme yok. Ücretsiz ve sınırsız.
- Kapı Zili GIF GIF’in ilk karesini uzun süre bekletip animasyonu sonra başlatır; önizlemede sabit görünen efekt için. Kareler tarayıcıda işlenir, yükleme yok.
- GIF Döndürme Animasyonlu GIF’i 90, 180 veya 270 derece döndürür, yatay ve dikey aynalar. Tüm kareler birlikte işlenir, dosyan sunucuya yüklenmez. Kurulum gerekmez.
- GIF Döngü Sayısı GIF’in kaç kez oynayacağını belirler: sonsuz döngü, tek seferlik ya da sabit bir sayı. Ayar dosyanın içine yazılır, sunucuya yüklenmez. Üyelik gerekmez.