Принцип работы
Remotion Markup сосредоточен на создании композиций: тайминг считается от частоты кадров композиции, анимация зависит от текущего кадра, а медиаэлементы участвуют в видеотаймлайне. Источник прямо предупреждает, что обычные переходы и классы анимации CSS не заменяют покадровый рендеринг.
Это также справочный центр для более специальных задач: от субтитров и карт до измерения текста, эффектов и звука. Его практическая ценность — базовый контракт: держать тайминг рядом с авторским элементом, сохранять независимые цели редактирования и использовать подходящий медиакомпонент или компонент эффекта, а не считать каждый визуальный элемент произвольной DOM-обёрткой.
Ожидаемые результаты
- Разметка композиции React, управляемая кадрами
- Медиаслои с явным таймингом и ссылками на ресурсы
- Сцена с предпросмотром и поддерживаемыми структурами эффектов и редактирования
От задания до проверки
- 01Прочитайте настройки композиции
Используйте текущую частоту кадров для пересчёта секунд в кадры и сохраните нужные длительность и размеры.
- 02Создайте слои с таймингом
Держите независимо редактируемые медиа и сцены в отдельных узлах JSX, а тайминг задавайте прямо в компонентах, которые его поддерживают. Проверенный источник также требует предварительного монтирования на одну секунду через premountFor={fps} для поддерживаемых компонентов с таймингом, включая вложенные элементы; перед применением проверьте установленную версию API.
- 03Добавьте движение и эффекты
Управляйте движением через интерполяцию по текущему кадру. Специальные эффекты подключайте через соответствующий справочник и совместимый компонент.
- 04Проверьте видеокадры
Просмотрите воспроизведение в Studio и характерные отрендеренные кадры: переполнение текста, готовность медиа и тайминг.