Editor Animasi Berbasis Web dengan Sistem Keyframe & Ekspor Video Transparan

Kami membangun editor animasi berbasis web menggunakan React dan Pixi.js untuk rendering yang dipercepat hardware, mesin keyframe dengan 30+ fungsi easing, dan backend bertenaga FFmpeg untuk mengekspor video WebM dengan dukungan alpha channel VP9 penuh.

Arsitektur

• Frontend: React dengan TypeScript, Pixi.js untuk rendering canvas yang dipercepat WebGL
• Manajemen State: Zustand untuk state adegan terpusat
• Mesin Animasi: Mesin interpolasi keyframe kustom dengan pustaka easing
• Backend: Express.js dengan dukungan WebSocket untuk streaming frame waktu nyata
• Encoding Video: FFmpeg (melalui fluent-ffmpeg) untuk encoding VP9 WebM dengan alpha channel
• Monorepo: pnpm workspace dengan type TypeScript bersama di seluruh frontend dan backend

Mesin Animasi

Sistem Keyframe

Mesin animasi inti mendukung animasi berbasis keyframe di berbagai properti:

• Posisi — Koordinat X/Y untuk jalur gerakan
• Rotasi — Animasi rotasi berbasis derajat
• Warna — Interpolasi warna Hex dengan transisi yang halus
• Alpha — Animasi opasitas untuk efek fade
• Ukuran — Penskalaan lebar, tinggi, dan radius

Setiap keyframe menyimpan waktu (dalam milidetik), subset properti animasi, dan fungsi easing yang dipilih. Mesin ini menginterpolasi antara keyframe di sekitarnya pada titik waktu mana pun, menerapkan kurva easing yang sesuai.

Pustaka Easing (30+ Fungsi)

Pustaka easing komprehensif yang mencakup semua kurva animasi standar:

• Linear, Quadratic, Cubic, Quartic, Quintic
• Sinusoidal, Exponential, Circular
• Elastic (kelebihan seperti pegas), Back (antisipasi), Bounce
• Masing-masing tersedia dalam varian ease-in, ease-out, dan ease-in-out

Interpolasi

Untuk stempel waktu tertentu, mesin:

1. Menemukan keyframe di sekitarnya (sebelum dan sesudah)
2. Menghitung progres yang dinormalisasi di antaranya (0 hingga 1)
3. Menerapkan fungsi easing yang dipilih ke nilai progres
4. Menginterpolasi nilai properti (linear untuk angka, color lerp untuk nilai hex)
5. Mengembalikan set properti animasi lengkap untuk rendering

Canvas & Rendering

Jenis Objek

• Persegi Panjang — Lebar, tinggi, warna, alpha, rotasi yang dapat dikonfigurasi
• Lingkaran — Radius, warna, alpha, rotasi yang dapat dikonfigurasi
• Teks — Family font, ukuran font, konten, warna, alpha yang dapat dikonfigurasi

Rendering yang Dipercepat Hardware

• Rendering WebGL Pixi.js untuk pemutaran pratinjau 60fps yang mulus
• Resolusi canvas yang dapat dikonfigurasi (default 1920x1080 pada 30fps)
• Dukungan latar belakang transparan dengan alpha latar belakang yang dapat disesuaikan
• Pemilihan objek interaktif dengan penyorotan visual
• Pemutaran animasi waktu nyata dengan putar, jeda, dan scrubbing timeline

Antarmuka Editor

Bilah Alat

Tombol pembuatan objek untuk menambahkan persegi panjang, lingkaran, dan teks ke adegan dengan properti default yang dapat disesuaikan segera.

Panel Properti

Properti objek yang dipilih dapat diedit secara waktu nyata: posisi, ukuran, warna, alpha, rotasi, dan properti spesifik tipe (konten teks, pengaturan font).

Timeline

Timeline visual menunjukkan:

• Penanda keyframe pada posisi waktunya per objek
• Playhead untuk waktu saat ini dengan scrubbing
• Pemilihan fungsi easing per keyframe
• Kontrol tambah/hapus keyframe pada posisi playhead saat ini

Alur Kerja Ekspor Video

Pengambilan Frame

1. Durasi animasi dan FPS menentukan jumlah total frame
2. Setiap frame di-render secara individual pada resolusi penuh
3. Konten canvas ditangkap sebagai blob PNG per frame
4. Frame dikumpulkan untuk diunggah ke backend encoding

Backend Encoding

Backend Express.js menangani encoding video melalui sistem berbasis job:

1. Pembuatan Job — Klien meminta job ekspor baru (berbasis UUID)
2. Unggah Frame — Frame diunggah dalam batch (atau di-streaming via WebSocket)
3. Encoding FFmpeg — Frame dirangkai menjadi video WebM dengan codec VP9
4. Alpha Channel — Menggunakan format piksel yuva420p untuk dukungan transparansi penuh
5. Pelacakan Progres — Pembaruan progres waktu nyata selama encoding
6. Unduh — Video yang selesai tersedia untuk diunduh dengan verifikasi transparansi

Alternatif WebSocket

Untuk ekspor waktu nyata, frame dapat di-streaming langsung via WebSocket alih-alih unggahan batch HTTP, dengan pembaruan progres langsung selama fase pengambilan, unggahan, dan encoding.

Fitur Utama

1. Animasi Keyframe — Animasi berbasis timeline dengan keyframe per properti
2. 30+ Fungsi Easing — Pustaka easing lengkap untuk kurva animasi profesional
3. Ekspor Video Transparan — VP9 WebM dengan dukungan alpha channel penuh
4. Canvas yang Dipercepat Hardware — Rendering WebGL Pixi.js untuk pratinjau waktu nyata yang mulus
5. Berbagai Jenis Objek — Persegi panjang, lingkaran, dan teks dengan animasi independen
6. Pratinjau Waktu Nyata — Putar, jeda, dan scrub melalui animasi secara instan
7. Ekspor Batch & Streaming — Unggahan batch HTTP atau streaming frame waktu nyata WebSocket
8. Output yang Dapat Dikonfigurasi — Pengaturan resolusi, FPS, dan bitrate untuk ekspor
9. Monorepo Type-Safe — Tipe TypeScript bersama di seluruh frontend dan backend
10. Latar Belakang Kustom — Warna latar belakang dan alpha yang dapat disesuaikan dengan dukungan gambar/video