Я посетил http://www.sublimetext.com сегодня и был заинтригован анимацией скринкаста, которую веб-сайт имеет на своей начальной странице. Это похоже на mashup между видео и слайд-шоу. Я видел их и на других современных веб-сайтах, но я предположил, что это была какая-то трюк с тэгами HTML5. Но когда я посмотрел на источник веб-страницы sublimetext, я был в замешательстве.
Анимация на этой странице создается на двумерном холсте HTML5 с простым javascript, используя базовые изображения PNG. Каждый слайд загружается из PNG файла. Анимация достигается путем изменения только нескольких пикселей из изображения. Анимационный javascript применял эти изменения на исходных PNG через регулярные интервалы. Эти дельта хранятся в переменных * _timeline в script.
Мой вопрос - какой инструмент может генерировать такие дельта? Как можно записать один экран рабочего стола и создать такие базовые анимации PNG + анимации?
Мне нравится этот подход, потому что он кажется наиболее эффективным форматом для скринкастов, где изменения в последовательных кадрах минимальны.
Обновление 1 Я знаю, что есть способы достижения этого с помощью GIF (проверьте https://askubuntu.com/q/107726), но какой классный инструмент может сгенерировать этот javascript-код, который может конвертировать PNG-дельта в анимацию. Googling не помог мне разобраться.
Обновление 2 Автор screencast (и sublimetext) ответил на мой вопрос на форуме sublimetext. Он сделал это с помощью пользовательского python script и планирует написать сообщение в блоге об этом когда-нибудь http://www.sublimetext.com/forum/viewtopic.php?p=34252#p34252
