Как появилась эта анимация для создания скринкастов HTML5?

Я посетил 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

Ответы

Ответ 1

Джон Скиннер, создатель Sublime Text написал о процессе на своем сайте

Он также опубликовал кодировщик, который он написал на GitHub

Ответ 2

взгляните на одно из своих изображений, и вы поймете, как это работает:

http://www.sublimetext.com/anim/command_palette_packed.png

они просто режут и вставляют соответствующие части изображения в соответствующие позиции элемента canvas, но если ваш вопрос заключается в том, как сделать такое изображение, у меня нет идеи. Думаю, с некоторым программным обеспечением, а не вручную, но я не знаю таких мягких...