Почему в превью анимация работает, а в отрендеренном видео ломается?
- Что нельзя использовать в анимации для рендера HTML в видео?
HTML-рендер не проигрывает страницу, а перематывает её на каждый кадр. Всё, что зависит от реального времени, случайности или сети, даёт разные кадры.
- Таймеры и CSS-переходы по событию — анимация «не успевает» или прыгает
Math.random()без зерна — элементы дрожат между кадрами- Шрифты и картинки из сети — первые кадры со шрифтом по умолчанию
А ещё Правило: всё движение — функция времени таймлинии, все ресурсы — локальные файлы
Подробно
В браузере анимация идёт сама: проходит секунда — CSS-переход сдвигается. Рендер HyperFrames или Remotion работает иначе: он ставит время, например 2,033 с, ждёт отрисовки, снимает кадр, ставит 2,067 с — и так далее. Между кадрами может пройти сколько угодно реального времени. Отсюда типичные поломки:
- Таймеры и события.
setTimeout,setInterval,requestAnimationFrameс собственным счётчиком, CSS-переход по добавлению класса — всё это живёт в реальном времени, а не во времени ролика. В HyperFrames движение описывают GSAP-таймлинией, которой управляет рендер; в Remotion — вычисляют от номера кадра. - Случайность. Частицы с
Math.random()получают новые координаты на каждом кадре. Нужен генератор с фиксированным зерном или заранее рассчитанные значения. - Сеть. Шрифт с CDN или картинка по ссылке могут не загрузиться к первому кадру. Ресурсы кладут в проект локально.
- Видео внутри. Вложенный ролик тоже должен перематываться вместе с таймлинией, а не играть сам по себе — поэтому его объявляют клипом.
Детерминизм — главная ценность видео как кода: тот же проект даёт те же кадры на любой машине. Всё, что его нарушает, ломает и повторяемость, и пакетный рендер серий.
Что хотят услышать
- Рендер перематывает время, а не проигрывает.
- Таймеры, случайность без зерна, сетевые ресурсы.
- Движение — от времени таймлинии, ресурсы — локально.
Проверьте себя
Несколько верных вариантов. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✓Анимация завязана на реальное время — setTimeout, setInterval, CSS-переход по событию, — а рендер перематывает кадры, а не проигрывает их
- ✓Используется Math.random без фиксированного зерна — каждый кадр получает другое значение
- ✓Шрифт или картинка грузится из сети и не успевает загрузиться к первому кадру
- ✗Ролик сделан вертикальным, а рендер поддерживает только горизонтальное видео
Что спросят дальше
Связанные вопросы
sotto — ассистент для живых разговоров
Помогает вести занятия, лекции и рабочие созвоны: на одном экране показывает подсказки по материалу, которые не видит аудитория, и помогает точнее отвечать на вопросы.