Format apa yang mendukung animasi yang cocok untuk web?

13

Format apa yang mendukung animasi yang cocok untuk web dan apa pro dan kontra dari masing-masing.

image-format animation

— Alinium
sumber

Lihat juga Apa cara terbaik untuk menghidupkan ilustrasi untuk web? untuk informasi lebih lanjut mengenai masing-masing format

— Zach Saucier

13

Tergantung pada jenis animasi yang Anda butuhkan.

.gif images - Sepenuhnya didukung, tetapi penggunaan terbatas dengan bingkai. File .png seharusnya memiliki dukungan untuk animasi, tetapi Anda tidak sering melihatnya di alam liar, jika sama sekali.
Flash, Silverlight, dan plugins lainnya - Flash memiliki paling banyak di mana-mana, tetapi semua plugins perlu diinstal di browser dan tidak dapat selalu dihitung untuk diinstal pada komputer pengguna. Mungkin tidak berfungsi untuk platform seluler.
CSS3 - Transformasi atau animasi terbatas, dukungan browser terbatas.
Video HTML5 - Dukungan browser masa depan, namun terbatas.
JavaScript - Perlu diaktifkan, tetapi harus memiliki dukungan browser universal. Jenis animasi yang terbatas. Lihat Raphael.js .
Tag kanvas - Dukungan browser modern, tetapi mendukung animasi yang kaya.

— Virtuosi Media
sumber

Saya akan melakukan nitpick di sini, tetapi <canvas>animasi pada dasarnya adalah JavaScript - itu hanya format berbeda yang dapat digunakan untuk menggambar. Jika Anda ingin lebih tepat, Anda harus membedakan antara menjiwai elemen HTML, SVG (yang menggunakan raphael.js) dan HTML5<canvas>

— Yi Jiang

The perbedaan antara SVG dan kanvas animasi singkatnya - dengan SVG, setiap jalan adalah elemen Anda dapat mengikat data dan acara seperti klik dan mouseover ke dan berinteraksi dengan seperti div, sementara di kanvas, itu lebih seperti browser menciptakan sesuatu, memberikan mereka aturan perilaku kemudian lupa tentang mereka. SVG tidak ada di IE sebelum IE 9, itulah sebabnya Raphael mengagumkan - ia mengendalikan SVG, atau, di IE6-8, ia menggunakan padanan merek lama IE sendiri (disebut VML). Satu-satunya yang saya tahu bahwa Raphael tidak berfungsi adalah browser stok Android lama (sebelum versi 2 saya pikir).

— user56reinstatemonica8

2

Ini adalah tambahan dari jawaban bagus Virtuosi Media:

Apple baru-baru ini menggunakan gambar JPEG dan PNG untuk animasi di situs mereka. Mereka menggunakan JavaScript untuk mengganti gambar. Ini adalah teknik yang hebat jika Anda tidak memiliki terlalu banyak bingkai, memerlukan dukungan transparansi alfa, ingin animasi untuk ditempatkan pada halaman dan jika Anda ingin dukungan browser yang luas. Kelemahannya adalah ukuran dan upaya pengunduhan.

Ini juga bisa interaktif. Jika Anda menggulir ke bagian Smart Cover dari halaman iPad Apple, Anda dapat melihatnya beraksi: http://www.apple.com/ipad/features/

— Marc Edwards
sumber

1

Saat overlay gambar yang berisi transparansi di atas gambar animasi pada lapisan di bawah gambar. Anda akan menemukan bahwa PNG24 adalah satu-satunya format gambar di mana anti-aliasing berpadu dengan benar dengan gambar latar belakang. Dengan GIF dan PNG8 Anda akan menemukan bahwa semua tepi Anda tebal. Tidak terlihat sangat bagus, tetapi sangat mudah untuk dilewatkan.

— John Drefahl
sumber