Anahtar Kare Sistemli ve Şeffaf Video Dışa Aktarma Özellikli Web Tabanlı Animasyon Düzenleyici

Donanım hızlandırmalı oluşturma için React ve Pixi.js, 30'dan fazla yumuşatma fonksiyonuna sahip bir anahtar kare motoru ve tam VP9 alpha channel desteğiyle WebM videoları dışa aktarmak için FFmpeg destekli bir backend kullanarak web tabanlı bir animasyon düzenleyici oluşturduk.

Mimari

• Frontend: WebGL hızlandırmalı canvas oluşturma için React ve TypeScript, Pixi.js
• Durum Yönetimi: Merkezi sahne durumu için Zustand
• Animasyon Motoru: Yumuşatma kütüphanesine sahip özel anahtar kare enterpolasyon motoru
• Backend: Gerçek zamanlı kare akışı için WebSocket destekli Express.js
• Video Kodlama: Alpha channel ile VP9 WebM kodlama için FFmpeg (fluent-ffmpeg aracılığıyla)
• Monorepo: Frontend ve backend arasında paylaşılan TypeScript türlerine sahip pnpm workspace

Animasyon Motoru

Anahtar Kare Sistemi

Çekirdek animasyon motoru, birden fazla özellikte anahtar kare tabanlı animasyonu destekler:

• Konum — Hareket yolları için X/Y koordinatları
• Döndürme — Derece tabanlı döndürme animasyonu
• Renk — Akıcı geçişlerle Hex renk enterpolasyonu
• Alfa — Solma efektleri için opaklık animasyonu
• Boyut — Genişlik, yükseklik ve yarıçap ölçekleme

Her anahtar kare, zamanı (milisaniye cinsinden), animasyonlu özelliklerin bir alt kümesini ve seçilen bir yumuşatma fonksiyonunu saklar. Motor, herhangi bir zamanda çevresindeki anahtar kareler arasında enterpolasyon yapar ve uygun yumuşatma eğrisini uygular.

Yumuşatma Kütüphanesi (30+ Fonksiyon)

Tüm standart animasyon eğrilerini kapsayan kapsamlı bir yumuşatma kütüphanesi:

• Linear, Quadratic, Cubic, Quartic, Quintic
• Sinusoidal, Exponential, Circular
• Elastic (yay benzeri aşım), Back (beklenti), Bounce
• Her biri ease-in, ease-out ve ease-in-out varyantlarında mevcuttur

Enterpolasyon

Herhangi bir zaman damgası için motor:

1. Çevredeki anahtar kareleri bulur (önceki ve sonraki)
2. Arlarındaki normalize edilmiş ilerlemeyi hesaplar (0 ila 1)
3. Seçilen yumuşatma fonksiyonunu ilerleme değerine uygular
4. Özellik değerlerini enterpole eder (sayılar için doğrusal, hex değerleri için renk lerp)
5. Oluşturma için animasyonlu özelliklerin tam setini döndürür

Canvas ve Oluşturma

Nesne Türleri

• Dikdörtgenler — Yapılandırılabilir genişlik, yükseklik, renk, alfa, döndürme
• Çemberler — Yapılandırılabilir yarıçap, renk, alfa, döndürme
• Metin — Yapılandırılabilir yazı tipi ailesi, yazı tipi boyutu, içerik, renk, alfa

Donanım Hızlandırmalı Oluşturma

• Akıcı 60fps önizleme oynatımı için Pixi.js WebGL oluşturma
• Yapılandırılabilir canvas çözünürlüğü (varsayılan 1920x1080 @ 30fps)
• Ayarlanabilir arka plan alfa değeri ile şeffaf arka plan desteği
• Görsel vurgulama ile etkileşimli nesne seçimi
• Oynatma, duraklatma ve zaman çizelgesi kaydırma ile gerçek zamanlı animasyon oynatma

Düzenleyici Arayüzü

Araç Çubuğu

Varsayılan özelliklerle sahneye dikdörtgenler, çemberler ve metin eklemek için nesne oluşturma düğmeleri, bu özellikler hemen özelleştirilebilir.

Özellikler Paneli

Seçilen nesne özellikleri gerçek zamanlı olarak düzenlenebilir: konum, boyut, renk, alfa, döndürme ve türe özgü özellikler (metin içeriği, yazı tipi ayarları).

Zaman Çizelgesi

Görsel zaman çizelgesi aşağıdakileri gösterir:

• Her nesne için zaman konumlarındaki anahtar kare işaretleyicileri
• Kaydırma özellikli mevcut zaman için oynatma kafası
• Anahtar kare başına yumuşatma fonksiyonu seçimi
• Mevcut oynatma kafası konumunda anahtar kare ekleme/kaldırma kontrolleri

Video Dışa Aktırma Akışı

Kare Yakalama

1. Animasyon süresi ve FPS, toplam kare sayısını belirler
2. Her kare, tam çözünürlükte ayrı ayrı oluşturulur
3. Canvas içeriği, kare başına PNG blob olarak yakalanır
4. Kareler, kodlama backend'ine yüklenmek üzere toplanır

Kodlama Backend'i

Express.js backend'i, iş tabanlı bir sistem aracılığıyla video kodlamasını yönetir:

1. İş Oluşturma — İstemci yeni bir dışa aktarma işi talep eder (UUID tabanlı)
2. Kare Yükleme — Kareler toplu olarak (veya WebSocket aracılığıyla akış olarak) yüklenir
3. FFmpeg Kodlama — Kareler, VP9 codec ile WebM videosuna dönüştürülür
4. Alpha Channel — Tam şeffaflık desteği için yuva420p piksel formatını kullanır
5. İlerleme Takibi — Kodlama sırasında gerçek zamanlı ilerleme güncellemeleri
6. İndirme — Tamamlanmış video, şeffaflık doğrulaması ile indirilmeye hazır olur

WebSocket Alternatifi

Gerçek zamanlı dışa aktarım için, HTTP toplu yükleme yerine kareler doğrudan WebSocket aracılığıyla aktarılabilir, yakalama, yükleme ve kodlama aşamaları boyunca canlı ilerleme güncellemeleriyle birlikte.

Temel Özellikler

1. Anahtar Kare Animasyonu — Özellik başına anahtar karelere sahip zaman çizelgesi tabanlı animasyon
2. 30+ Yumuşatma Fonksiyonu — Profesyonel animasyon eğrileri için eksiksiz yumuşatma kütüphanesi
3. Şeffaf Video Dışa Aktarma — Tam alpha channel desteğine sahip VP9 WebM
4. Donanım Hızlandırmalı Canvas — Akıcı gerçek zamanlı önizleme için Pixi.js WebGL oluşturma
5. Birden Fazla Nesne Türü — Bağımsız animasyona sahip dikdörtgenler, çemberler ve metinler
6. Gerçek Zamanlı Önizleme — Animasyonları anında oynatma, duraklatma ve kaydırma
7. Toplu ve Akışlı Dışa Aktarma — HTTP toplu yükleme veya WebSocket gerçek zamanlı kare akışı
8. Yapılandırılabilir Çıktı — Dışa aktarma için çözünürlük, FPS ve bit hızı ayarları
9. Tip Güvenli Monorepo — Frontend ve backend arasında paylaşılan TypeScript türleri
10. Özel Arka Planlar — Görüntü/video desteği ile ayarlanabilir arka plan rengi ve alfa