Создание плавной анимации, синхронизированной с прокруткой, для OPTIKKA: от HTML5-видео до покадровых последовательностей
Выжимка статьи: Creating Smooth Scroll-Synchronized Animation for OPTIKKA: From HTML5 Video to Frame Sequences
При работе над платформой OPTIKKA команда Zajno столкнулась с задачей создания динамичной анимации файловой системы, расширяющейся при прокрутке. Изначально предполагалось использовать HTML5-видео в связке с плагином GSAP ScrollTrigger для синхронизации с прокруткой, что казалось перспективным благодаря нативной поддержке видео в браузерах, компактности файла и эффективной компрессии. Однако на практике этот подход выявил значительные недостатки: рывки и задержки (особенно на мобильных устройствах), ограничения на автовоспроизведение и потерю визуального качества из-за компрессии.
Эти проблемы побудили к переходу на более контролируемое и надежное решение: покадровые последовательности изображений. Для создания таких последовательностей использовался FFmpeg, конвертирующий исходное видео в отдельные PNG-кадры, которые затем оптимизировались до формата WebP для уменьшения размера файлов:
ffmpeg -i "video/input.mp4" -vf "fps=30" "png/frame_%03d.png"
ffmpeg -i "png/frame_%03d.png" -c:v libwebp -quality 80 "webp/frame_%03d.webp"
Были созданы отдельные наборы последовательностей для разных устройств (например, больше кадров для десктопов и меньше для мобильных) с динамической загрузкой в зависимости от типа устройства. Одной из ключевых задач стала эффективная загрузка более тысячи изображений без блокировки пользовательского интерфейса, для чего была реализована поэтапная система. Первые 10 кадров загружались мгновенно для немедленного отображения анимации, а остальные — в фоновом режиме с использованием системы ParallelQueue.
Рендеринг анимации осуществлялся с помощью элемента <canvas>, что обеспечило мгновенное отображение кадров из памяти, отсутствие перерисовки DOM и плавную работу через requestAnimationFrame, в отличие от использования тегов <img>. Дополнительно была внедрена "умная" предзагрузка кадров: 5 кадров вперед или назад в зависимости от направления прокрутки, что значительно повысило плавность анимации.
Несмотря на возросшую сложность реализации, включая увеличение пропускной способности и общего объема данных, переход на покадровые последовательности дал стабильную производительность, предсказуемое потребление памяти и абсолютный контроль над каждым кадром. В итоге, для проекта OPTIKKA более сложный технически подход с использованием покадровых последовательностей был полностью оправдан, обеспечив превосходный пользовательский опыт с плавной и высококачественной анимацией.
Оригинал статьи: Creating Smooth Scroll-Synchronized Animation for OPTIKKA: From HTML5 Video to Frame Sequences
