демо продукта с помощью Canvas анимации

Question

Я люблю то, как Sublime текст показывает, что это демо-версию продукта на его домашней странице: http://www.sublimetext.com/

Как я могу создать подобную демонстрацию? Все, что я отмечаю, это элемент Canvas.

Извините, если это звучит как основной вопрос. Я вижу, что это сделано на холсте. Любые выводы или помощь в этом отношении высоко ценятся?

Answer 1

Они используют задержки и части изображений, таких, как этот (смотрите в нижней части изображения):

и указать, что (прямоугольная) часть каждого изображения делает, когда, делая это похоже на анимацию.

Это типичный texture atlas.

---

Это список изображений:

"anim/rename2_packed.png", 
"anim/days_169_packed.png", 
"anim/command_palette_packed.png", 
"anim/goto_anything_packed.png", 
"anim/goto_anything2_packed.png", 
"anim/regex_packed.png" 

---

И это, как они определяют задержку и части изображения

{"delay":1811,"blit":[[0,0,800,450,0,0]]}, 
{"delay":48,"blit":[[0,450,400,344,200,36],[66,982,63,15,0,36]]}, 
{"delay":798,"blit":[]}, etc... 

Как вы видите, delay является время в миллисекундах и blit выглядит как параметры для drawImage - srcX, sr cY, ширина, высота, destX, destY.

---

Каждый из «экранов» хранится в виде отдельной переменной, как command_palette_timeline, days_169_timeline, goto_anything_timeline, и т.д. каждый из которых содержит задержку/блитирования массив объектов, как один из предыдущего абзаца.

---

Действительное визуализации кода довольно проста, они следуют за каждый шаг в каждой временной шкале, с задержками между ними, и каждый шаг оказывается так:

for (j = 0; j < blits.length; ++j) 
    { 
     var blit = blits[j] 
     var sx = blit[0] 
     var sy = blit[1] 
     var w = blit[2] 
     var h = blit[3] 
     var dx = blit[4] 
     var dy = blit[5] 
     ctx.drawImage(img, sx, sy, w, h, dx, dy, w, h) 
    }