BerandaComputers and TechnologyGIF animasi dengan Cara yang Sulit

GIF animasi dengan Cara yang Sulit

Saat membuat situs web baru untuk Sublime Text 2.0 diluncurkan, alih-alih hanya tangkapan layar, saya ingin memiliki animasi untuk mendemonstrasikan beberapa fiturnya. Salah satu kriterianya adalah animasi harus berfungsi di mana saja, dari IE6 hingga iPad. Ini mengesampingkan dua opsi video umum, Flash dan elemen

Sebagai gantinya, saya menulis skrip Python kecil yang mengambil koleksi bingkai PNG sebagai input, dan memancarkan satu file PNG yang dikemas sebagai output, yang berisi semua perbedaan antara bingkai, dan beberapa meta-data JSON yang menentukan bit mana dari file PNG yang dikemas sesuai dengan setiap bingkai. JavaScript mengubah PNG dan JSON menjadi animasi, menggunakan elemen kanvas, atau mengemulasinya menggunakan elemen div berlapis untuk browser lama.

Sebagai contoh singkat, animasi ini:

dikemas ke dalam file PNG ini:

Ukuran data animasi adalah 96 KB untuk gambar yang dikemas ditambah 725 byte untuk meta-data yang di-gzip. Ini sebanding dengan 71KB untuk PNG statis dari satu frame. Selain dari keunggulan kualitas dibandingkan GIF animasi, melakukan pemutaran di JavaScript memberikan kontrol lebih terhadap animasi. Kontrol ini digunakan di situs web Sublime Text untuk menyinkronkan teks dengan animasi, dan secara otomatis menelusuri animasi yang berbeda.

Data meta terlihat seperti ini:

 garis waktu=[{"delay":623,"blit":[[0,0,800,450,0,0] ] }, { "penundaan": 182, "blit": [[0,450,322,16,182,40], [771,482,23,10,738,96], [720,527,23,16,244,100], [51,526,21,16,729,128], [586,527,20,10,738,196], ... ] }, { "penundaan": 194, "blit": [[0,526,51,15,0,100], [777,450,23,16,244,100], [794,488,4,2,738,104], [608,512,112,13,4,434] ] }, ... ] 

Setiap entri dalam garis waktu di atas menjelaskan kerangka data. Atribut penundaan memberikan jumlah milidetik untuk menunjukkan bingkai, dan atribut blit menjelaskan gambar persegi panjang yang telah berubah dari bingkai sebelumnya. Deskripsi ini menggunakan 6 angka, dua angka pertama memberikan offset di dalam gambar yang dikemas, kemudian dua angka untuk lebar dan tinggi persegi panjang, lalu sepasang angka lainnya untuk posisi tujuan.

Kode JavaScript untuk memutar animasi cukup pendek: versi kanvas memanggil drawImage untuk menggambar setiap persegi panjang pada waktu yang tepat, sementara versi fallback membuat elemen div yang diposisikan secara mutlak untuk mewakili setiap persegi panjang.

Program encoder Python berusaha keras untuk mengurangi ukuran file. Untuk setiap bingkai, pertama-tama menentukan sekumpulan persegi panjang yang berbeda dari bingkai sebelumnya. Masing-masing persegi panjang ini ditempatkan ke dalam gambar yang dikemas, tetapi pertama-tama gambar yang dikemas dicari secara menyeluruh untuk melihat apakah datanya sudah ada, dalam hal ini hanya meta-data yang diperlukan untuk bingkai.

Mendapatkan Encoder

Anda dapat mengunduh encoder dari http: / /github.com/sublimehq/anim_encoder, di bawah lisensi permisif 3 klausa BSD. Ingatlah bahwa itu ditulis sebagai skrip yang pada dasarnya tidak aktif, jadi ini bukan hal termudah untuk dikerjakan.

Prasyarat

anim_encoder.py hanya digunakan di sistem Ubuntu. Ini membutuhkan NumPy, SciPy dan OpenCV, yang tersedia melalui apt-get sebagai python-numpy, python-scipy dan python-opencv. Ini juga mengasumsikan pngcrush diinstal, dan di jalur sistem.

Menggunakan Encoder

Untuk masukan, Anda harus memiliki serangkaian file bernama layar _ ([0-9] +). png . Angka dalam nama file adalah stempel waktu dalam milidetik untuk bingkai tersebut. Nilai absolut dari stempel waktu tidak penting, hanya perbedaannya saja. Sebagai contoh:

 example / screen_660305415.png example / screen_660306038.png example / screen_660306220.png example / screen_660306414.png example / screen_660306598.png example / screen_660306790.png example / screen_660307644.png example / screen_660307810.png example / screen_660307875.png example / screen_660308049.png example / screen_660308235.png example / screen_660308285.png example / screen_660309704.png 

Kemudian jalankan encoder melalui:

 Contoh ./anim_encoder.py 

Ini akan memancarkan dua file example_packed.png , dan example_anim.js , berisi file linimasa.

Hal yang Dapat Anda Lakukan

  • Jadikan pembuat enkode lebih ramah. Saat ini tidak ada bantuan baris perintah, selalu menghabiskan banyak waktu untuk mencoba mengecilkan animasi, dan sangat pilih-pilih tentang data apa yang diterimanya (misalnya, itu akan jatuh jika input PNG memiliki saluran alfa).
  • Jadikan JavaScript menggunakan requestAnimationFrame, sehingga akan berperilaku sedikit lebih baik.
  • Buat encoder lebih cepat. Runtime tidak menjadi masalah untuk animasi pendek yang pernah saya gunakan, tetapi tidak akan menyenangkan untuk waktu yang lama.
  • Pemuatan Progresif. Saat ini tidak ada yang ditampilkan hingga seluruh animasi dimuat, namun karena bingkai pertama animasi selalu berada di bagian atas gambar yang dikemas, tidak akan sulit untuk menampilkan tampilan ini saat gambar yang dikemas dimuat.

Jon Skinner
https: //www.sublimeteks .com

Komentar di Berita Hacker

Read More

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments