Как избежать рывков колеса мыши и неровной частоты кадров в записи прокрутки

Обычное колесо мыши проворачивается щелчками, и каждый щелчок сдвигает страницу на фиксированное расстояние. Браузеры сглаживают каждый шаг короткой анимацией, поэтому непрерывный поворот колеса превращается в цепочку маленьких движений «разгон — остановка». На экране глаз это прощает. В видео, которое смотрят на большом экране, это выглядит как рывки.

• Лучшее решение: не пользуйтесь колесом. Пусть страницу с заданной скоростью прокручивает скрипт; готовый скрипт есть в руководстве по автопрокрутке.
• Если без ручной прокрутки никак: колесо со свободным вращением или тачпад, по которому вы ведёте медленно и ровно, лучше колеса со щелчками, но ни одна рука не удержит скорость двадцать секунд.

Многие встроенные средства записи, включая панель снимков экрана в macOS и QuickTime, записывают кадр, только когда на экране что-то меняется. Это экономит место, но промежутки между кадрами получаются разными, а видеоредакторы и некоторые плееры плохо с этим справляются: чтобы уложиться в фиксированную шкалу времени, кадры дублируются или выбрасываются, и прокрутка дрожит.

• Записывайте программой, которая пишет постоянную частоту кадров, например OBS Studio, с настройкой 60 fps.
• Если у вас уже есть файл с переменной частотой кадров, перед монтажом переведите его в постоянную. Это делает опция «Constant Framerate» в HandBrake.

При прокрутке каждый пиксель движется в каждом кадре. При 30 fps каждый кадр прыгает вдвое дальше, чем при 60, и на страницах с большим количеством текста глаз видит эти скачки. 24 fps — частота кино, и кино она подходит, но для страницы, прокручивающейся с любой скоростью, она выглядит наименее плавной из трёх.

Записывайте и экспортируйте в 60 fps, когда главное — движение. Опускайтесь до 30, только если нужны файлы поменьше, и тогда замедляйте прокрутку. В большинстве инструментов у GIF низкий потолок частоты кадров, поэтому прокрутку в GIF делайте короткой и неторопливой.

Если экран обновляется с частотой 120 или 144 Гц, а запись идёт в 60 fps, программа записи сохраняет примерно каждый второй кадр, а на экране с переменной частотой обновления даже не равномерно. Если на время записи поставить экрану 60 Гц, кадры будут совпадать один к одному. На Mac с ProMotion эта настройка находится в разделе «Мониторы», пункт «Частота обновления».

• Лениво загружаемые изображения декодируются в тот момент, когда попадают в кадр, и эта работа отнимает кадры. Перед записью прокрутите страницу до конца и обратно, чтобы всё загрузилось.
• Страницы с тяжёлыми скриптами, привязанными к прокрутке, видеофонами или эффектами на WebGL сильно нагружают компьютер. Закройте другие приложения и вкладки браузера.
• Запись и кодирование одновременно конкурируют со страницей за процессор. Используйте аппаратный кодировщик программы записи, если он есть.

Все причины выше появляются из-за того, что движение снимается в реальном времени на настоящем экране. Рендерер не делает ни того ни другого. Website Scroll Video один раз читает страницу, дожидается изображений и шрифтов, а затем рассчитывает, где страница должна быть в каждом кадре, и отрисовывает её. Здесь нет колеса, которое шагает, нет частоты экрана, под которую надо подстраиваться, и нет срока, к которому кадр может не успеть, поэтому видео держит фиксированные 24, 30 или 60 fps, какой бы длинной или тяжёлой ни была страница.