Penyunting Animasi Berasaskan Web dengan Sistem Keyframe & Eksport Video Lutsinar

Kami membina penyunting animasi berasaskan web menggunakan React dan Pixi.js untuk pemaparan dipercepatkan perkakasan, enjin keyframe dengan 30+ fungsi easing, dan bahagian belakang (backend) yang dikuasakan FFmpeg untuk mengeksport video WebM dengan sokongan saluran alpha VP9 penuh.

Seni Bina

• Frontend: React dengan TypeScript, Pixi.js untuk pemaparan kanvas dipercepatkan WebGL
• Pengurusan Keadaan: Zustand untuk keadaan adegan terpusat
• Enjin Animasi: Enjin interpolasi keyframe tersuai dengan pustaka easing
• Backend: Express.js dengan sokongan WebSocket untuk penstriman bingkai masa nyata
• Pengekodan Video: FFmpeg (melalui fluent-ffmpeg) untuk pengekodan VP9 WebM dengan saluran alpha
• Monorepo: pnpm workspace dengan jenis TypeScript yang dikongsi di seluruh frontend dan backend

Enjin Animasi

Sistem Keyframe

Enjin animasi teras menyokong animasi berasaskan keyframe merentasi pelbagai sifat:

• Kedudukan — Koordinat X/Y untuk laluan pergerakan
• Putaran — Animasi putaran berasaskan darjah
• Warna — Interpolasi warna Hex dengan peralihan lancar
• Alpha — Animasi kelegapan untuk kesan pudar
• Saiz — Skala lebar, tinggi, dan jejari

Setiap keyframe menyimpan masa (dalam milisaat), subset sifat animasi, dan fungsi easing yang dipilih. Enjin melakukan interpolasi antara keyframe di sekeliling pada mana-mana titik masa, menggunakan lengkung easing yang sesuai.

Pustaka Easing (30+ Fungsi)

Pustaka easing yang komprehensif merangkumi semua lengkung animasi standard:

• Linear, Quadratic, Cubic, Quartic, Quintic
• Sinusoidal, Exponential, Circular
• Elastic (overshoot seperti spring), Back (antisipasi), Bounce
• Setiap satu tersedia dalam varian ease-in, ease-out, dan ease-in-out

Interpolasi

Untuk mana-mana cap masa yang diberikan, enjin:

1. Mencari keyframe di sekeliling (sebelum dan selepas)
2. Mengira kemajuan ternormal antara mereka (0 hingga 1)
3. Menggunakan fungsi easing yang dipilih pada nilai kemajuan
4. Melakukan interpolasi nilai sifat (linear untuk nombor, color lerp untuk nilai hex)
5. Mengembalikan set lengkap sifat animasi untuk pemaparan

Kanvas & Pemaparan

Jenis Objek

• Segi Empat Tepat — Lebar, tinggi, warna, alpha, putaran boleh dikonfigurasi
• Bulatan — Jejari, warna, alpha, putaran boleh dikonfigurasi
• Teks — Famili fon, saiz fon, kandungan, warna, alpha boleh dikonfigurasi

Pemaparan Dipercepatkan Perkakasan

• Pemaparan Pixi.js WebGL untuk main balik pratonton 60fps yang lancar
• Resolusi kanvas boleh dikonfigurasi (lalai 1920x1080 pada 30fps)
• Sokongan latar belakang lutsinar dengan alpha latar belakang boleh laras
• Pemilihan objek interaktif dengan penonjolan visual
• Main balik animasi masa nyata dengan main, jeda, dan scrubbing garis masa

Antara Muka Penyunting

Bar Alat

Butang penciptaan objek untuk menambah segi empat tepat, bulatan, dan teks ke adegan dengan sifat lalai yang boleh disesuaikan dengan segera.

Panel Sifat

Sifat objek terpilih boleh diedit dalam masa nyata: kedudukan, saiz, warna, alpha, putaran, dan sifat khusus jenis (kandungan teks, tetapan fon).

Garis Masa

Garis masa visual menunjukkan:

• Penanda keyframe pada kedudukan masanya bagi setiap objek
• Playhead untuk masa semasa dengan scrubbing
• Pemilihan fungsi easing per-keyframe
• Kawalan tambah/buang keyframe pada kedudukan playhead semasa

Saluran Paip Eksport Video

Penangkapan Bingkai

1. Tempoh animasi dan FPS menentukan jumlah kiraan bingkai
2. Setiap bingkai dipaparkan secara individu pada resolusi penuh
3. Kandungan kanvas ditangkap sebagai PNG blob bagi setiap bingkai
4. Bingkai dikumpul untuk muat naik ke backend pengekodan

Backend Pengekodan

Backend Express.js mengendalikan pengekodan video melalui sistem berasaskan kerja:

1. Penciptaan Kerja — Klien meminta kerja eksport baharu (berasaskan UUID)
2. Muat Naik Bingkai — Bingkai dimuat naik secara berkelompok (atau distrim melalui WebSocket)
3. Pengekodan FFmpeg — Bingkai dipasang menjadi video WebM dengan codec VP9
4. Saluran Alpha — Menggunakan format piksel yuva420p untuk sokongan ketelusan penuh
5. Penjejakan Kemajuan — Kemas kini kemajuan masa nyata semasa pengekodan
6. Muat Turun — Video yang lengkap tersedia untuk dimuat turun dengan pengesahan ketelusan

Alternatif WebSocket

Untuk eksport masa nyata, bingkai boleh distrim secara langsung melalui WebSocket dan bukannya muat naik kelompok HTTP, dengan kemas kini kemajuan langsung sepanjang fasa penangkapan, muat naik, dan pengekodan.

Ciri-ciri Utama

1. Animasi Keyframe — Animasi berasaskan garis masa dengan keyframe per-sifat
2. 30+ Fungsi Easing — Pustaka easing lengkap untuk lengkung animasi profesional
3. Eksport Video Lutsinar — VP9 WebM dengan sokongan saluran alpha penuh
4. Kanvas Dipercepatkan Perkakasan — Pemaparan Pixi.js WebGL untuk pratonton masa nyata yang lancar
5. Pelbagai Jenis Objek — Segi empat tepat, bulatan, dan teks dengan animasi bebas
6. Pratonton Masa Nyata — Main, jeda, dan scrub melalui animasi serta-merta
7. Eksport Kelompok & Penstriman — Muat naik kelompok HTTP atau penstriman bingkai masa nyata WebSocket
8. Output Boleh Dikonfigurasi — Tetapan resolusi, FPS, dan bitrate untuk eksport
9. Monorepo Selamat Jenis — Jenis TypeScript yang dikongsi di seluruh frontend dan backend
10. Latar Belakang Tersuai — Warna latar belakang dan alpha boleh laras dengan sokongan imej/video