Animasyonu destekleyen hangi biçimler web için uygundur?

13

Animasyonu destekleyen hangi biçimler web için uygundur ve her birinin artıları ve eksileri nelerdir.

image-format animation

— Alinium
kaynak

Ayrıca bkz . Web için bir çizimi canlandırmanın en iyi yolu nedir? her format hakkında daha fazla bilgi için

— Zach Saucier

13

Hangi animasyon türüne ihtiyacınız olduğuna bağlıdır.

.gif resimler - Tamamen desteklenen ancak çerçevelerle sınırlı kullanım. .png dosyalarının animasyon desteği vardır, ancak vahşi ortamlarda çok sık görmezsiniz.
Flash, Silverlight ve diğer eklentiler - Flash en yaygın olanıdır, ancak tüm eklentilerin tarayıcılara yüklenmesi gerekir ve kullanıcının bilgisayarına yüklenmek için hesaba katılamaz. Mobil platformlar için çalışmayabilir.
CSS3 - Sınırlı dönüşümler veya animasyonlar, sınırlı tarayıcı desteği.
HTML5 videosu - Gelecek, ancak sınırlı tarayıcı desteği.
JavaScript - Etkinleştirilmesi gerekiyor, ancak evrensel tarayıcı desteğine yakın olmalıdır. Sınırlı animasyon türleri. Bkz. Raphael.js .
Tuval etiketi - Modern tarayıcı desteği, ancak zengin animasyonları destekler.

— Virtuosi Media
kaynak

Burada nitpick yapacağım, ancak <canvas>animasyon aslında JavaScript - sadece bir şeyler çizilebilecek farklı bir format. Kesin olmak istiyorsanız, HTML öğeleri, SVG (raphael.js'nin kullandığı) ve HTML5<canvas>

— Yi Jiang

SVG ve tuval animasyon arasındaki fark kısaca - SVG ile, her yol verir, tarayıcı şeyler yaratır fazla gibi Tuval içinde, bu kadar ederken, bir div gibi olan tıklama ve Mouseover ve etkileştiği gibi verileri ve olayları bağlayabilir bir elementtir sonra davranış kuralları onları unutur. SVG IE'de IE 9'dan önce mevcut değil, bu yüzden Raphael harika - SVG'yi kontrol ediyor veya IE6-8'de IE'nin eski kendi marka eşdeğerini (VML olarak adlandırılıyor) kullanıyor. Raphael'in çalışmadığını bildiğim tek şey eski Android stok tarayıcıları (sanırım sürüm 2'den önce).

— Kullanıcı56reinstatemonica8

2

Bu Virtuosi Media'nın harika cevabına ek olarak:

Apple, yakın zamanda sitelerinde animasyon için hareketsiz JPEG ve PNG resimleri kullandı. Resimleri değiştirmek için JavaScript kullanıyorlar. Çok fazla kareniz yoksa, alfa saydamlık desteğine ihtiyacınız varsa, animasyonun sayfada olmasını istiyorsanız ve geniş tarayıcı desteği istiyorsanız harika bir tekniktir. Dezavantajı indirme boyutu ve çabadır.

Etkileşimli de olabilir. Apple'ın iPad sayfasının Akıllı Kapak bölümüne ilerlerseniz, bunu çalışırken görebilirsiniz: http://www.apple.com/ipad/features/

— Marc Edwards
kaynak

1

Görüntünün altındaki katmanlardaki animasyonlu görüntülerin üstünde saydamlık içeren görüntüleri üst üste bindirirken. PNG24'ün kenar yumuşatmanın arka plan görüntüleri ile doğru şekilde karıştığı tek görüntü formatı olduğunu göreceksiniz. GIF ve PNG8 ile kenarlarınızın tıknaz olduğunu göreceksiniz. Çok iyi görünmüyor, ama kaçırması gerçekten kolay.

— John Drefahl
kaynak