Веб-орієнтований редактор анімації із системою ключових кадрів та експортом прозорого відео

Ми розробили веб-орієнтований редактор анімації, використовуючи React та Pixi.js для апаратного прискореного рендерингу, рушій ключових кадрів з понад 30 функціями згладжування, а також бекенд на основі FFmpeg для експорту відео у форматі WebM з повною підтримкою альфа-каналу VP9.

Архітектура

• Фронтенд: React з TypeScript, Pixi.js для рендерингу canvas з WebGL-прискоренням
• Керування станом: Zustand для централізованого стану сцени
• Рушій анімації: Власний рушій інтерполяції ключових кадрів з бібліотекою функцій згладжування
• Бекенд: Express.js з підтримкою WebSocket для потокової передачі кадрів у реальному часі
• Кодування відео: FFmpeg (через fluent-ffmpeg) для кодування VP9 WebM з альфа-каналом
• Монорепозиторій: pnpm workspace зі спільними типами TypeScript для фронтенду та бекенду

Рушій анімації

Система ключових кадрів

Основний рушій анімації підтримує анімацію на основі ключових кадрів для кількох властивостей:

• Позиція — Координати X/Y для траєкторій руху
• Обертання — Анімація обертання на основі градусів
• Колір — Інтерполяція HEX-кольорів з плавними переходами
• Альфа — Анімація непрозорості для ефектів згасання
• Розмір — Масштабування ширини, висоти та радіуса

Кожен ключовий кадр зберігає час (у мілісекундах), підмножину анімованих властивостей та обрану функцію згладжування. Рушій інтерполює між навколишніми ключовими кадрами в будь-який момент часу, застосовуючи відповідну криву згладжування.

Бібліотека функцій згладжування (30+ функцій)

Комплексна бібліотека функцій згладжування, що охоплює всі стандартні криві анімації:

• Linear, Quadratic, Cubic, Quartic, Quintic
• Sinusoidal, Exponential, Circular
• Elastic (пружинистий перевиліт), Back (передчуття), Bounce (відскок)
• Кожна доступна у варіантах ease-in, ease-out та ease-in-out

Інтерполяція

Для будь-якої заданої мітки часу рушій:

1. Знаходить навколишні ключові кадри (до та після)
2. Обчислює нормалізований прогрес між ними (від 0 до 1)
3. Застосовує обрану функцію згладжування до значення прогресу
4. Інтерполює значення властивостей (лінійно для чисел, color lerp для HEX-значень)
5. Повертає повний набір анімованих властивостей для рендерингу

Canvas та рендеринг

Типи об'єктів

• Прямокутники — Налаштовувані ширина, висота, колір, альфа, обертання
• Кола — Налаштовувані радіус, колір, альфа, обертання
• Текст — Налаштовувані сімейство шрифту, розмір шрифту, вміст, колір, альфа

Апаратне прискорений рендеринг

• WebGL-рендеринг за допомогою Pixi.js для плавного відтворення попереднього перегляду на 60fps
• Налаштовувана роздільна здатність canvas (за замовчуванням 1920x1080 при 30fps)
• Підтримка прозорого фону з регульованим альфа-каналом фону
• Інтерактивний вибір об'єктів з візуальним виділенням
• Відтворення анімації в реальному часі з функціями відтворення, паузи та скраббінгу на часовій шкалі

Інтерфейс редактора

Панель інструментів

Кнопки створення об'єктів для додавання прямокутників, кіл та тексту до сцени з властивостями за замовчуванням, які можна одразу налаштувати.

Панель властивостей

Властивості вибраного об'єкта, що редагуються в реальному часі: позиція, розмір, колір, альфа, обертання та властивості, специфічні для типу (вміст тексту, налаштування шрифту).

Часова шкала

Візуальна часова шкала показує:

• Маркери ключових кадрів у їхніх часових позиціях для кожного об'єкта
• Повзунок (playhead) для поточного часу з функцією скраббінгу
• Вибір функції згладжування для кожного ключового кадру
• Елементи керування додаванням/видаленням ключових кадрів на поточній позиції повзунка

Конвеєр експорту відео

Захоплення кадрів

1. Тривалість анімації та FPS визначають загальну кількість кадрів
2. Кожен кадр рендериться індивідуально у повній роздільній здатності
3. Вміст canvas захоплюється як PNG blob для кожного кадру
4. Кадри збираються для завантаження на бекенд кодування

Бекенд кодування

Бекенд Express.js обробляє кодування відео через систему, засновану на завданнях:

1. Створення завдання — Клієнт запитує нове завдання на експорт (на основі UUID)
2. Завантаження кадрів — Кадри завантажуються партіями (або передаються потоком через WebSocket)
3. Кодування FFmpeg — Кадри збираються у відео WebM з кодеком VP9
4. Альфа-канал — Використовує формат пікселів yuva420p для повної підтримки прозорості
5. Відстеження прогресу — Оновлення прогресу в реальному часі під час кодування
6. Завантаження — Завершене відео доступне для завантаження з перевіркою прозорості

Альтернатива WebSocket

Для експорту в реальному часі кадри можуть передаватися безпосередньо через WebSocket замість пакетного завантаження по HTTP, з оновленнями прогресу в реальному часі протягом фаз захоплення, завантаження та кодування.

Ключові особливості

1. Анімація ключових кадрів — Анімація на основі часової шкали з ключовими кадрами для кожної властивості
2. 30+ функцій згладжування — Повна бібліотека функцій згладжування для професійних кривих анімації
3. Експорт прозорого відео — VP9 WebM з повною підтримкою альфа-каналу
4. Апаратно прискорений Canvas — WebGL-рендеринг за допомогою Pixi.js для плавного попереднього перегляду в реальному часі
5. Кілька типів об'єктів — Прямокутники, кола та текст з незалежною анімацією
6. Попередній перегляд у реальному часі — Миттєве відтворення, пауза та скраббінг анімації
7. Пакетний та потоковий експорт — Пакетне завантаження по HTTP або потокова передача кадрів у реальному часі через WebSocket
8. Налаштовуваний вихід — Налаштування роздільної здатності, FPS та бітрейту для експорту
9. Type-Safe Monorepo — Спільні типи TypeScript для фронтенду та бекенду
10. Користувацькі фони — Регульований колір фону та альфа-канал з підтримкою зображень/відео