使用Canvas动画

Question

产品演示中，我喜欢这样的方式崇高的文本显示它的产品演示它的主页： http://www.sublimetext.com/

如何创建一个类似的演示？我只注意到它是一个Canvas元素。

对不起，如果它听起来是一个基本问题。我看到它是在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等。每个含有延迟/ blit的阵列。

---

实际的渲染代码是非常简单的，它们按照各自的时间表每一个步骤，与它们之间的延迟，并且每一步都呈现：

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) 
    }