使用 Canvas 动画的产品演示答案

【问题标题】：Product demo using Canvas Animation使用 Canvas 动画的产品演示
【发布时间】：2015-04-04 10:10:17
【问题描述】：

我喜欢 Sublime 文本在其主页上显示其产品演示的方式： http://www.sublimetext.com/

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

抱歉，这听起来像是一个基本问题。我看到它是在 Canvas 上制作的。非常感谢这方面的任何线索或帮助？

【问题讨论】：

Sublime 文本上的那个是使用 Canvas 完成的。 Gif 很慢，大分辨率的图像会使图像变得大而模糊。
您是否想实际演示您的应用程序——比如一系列分步截图？或者您只是想创建一个“自动打字机”，一次将一个字母绘制到画布上（就像正在打字一样）？或者是其他东西？ :-)

标签： animation canvas demo

【解决方案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、srcY、width、height、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)
    }

【讨论】：