Mozilla Hacks

使用 Canvas 和 Burst 制作 SVG 动画

头像照片 作者 Christopher Blizzard

发布于 2009 年 6 月 10 日 分类于 35 天、Canvas、Firefox 和 JavaScript

今天的演示很短，但它还包含一个较长的屏幕录制，描述了它的构建方式。演示的作者，Alistair MacDonald (@F1LT3R)，是 Processing.js 和 Burst 引擎 的维护者之一，Burst 引擎是今天演示和教程的基础。

如果你还没有点击他的 网站，我强烈建议你这样做。你会注意到该网站是动画化的，外观很流畅，带有滑动进出和大量图形的部分。这通常是使用 Flash 编写的，但主页上没有 Flash。它全部是 CSS、Canvas 和 DOM 中的动画。非常棒。

关于演示。已经有一些使用 SVG 动画的演示，但其中一个演示与众不同，使其与众不同。Burst 引擎不是像 SVG 最初设计的那样将 SVG 本地加载到 DOM 中，而是加载 SVG、解析它并在其周围创建一些 JS 对象，然后你可以使用这些对象将其渲染到 Canvas 上。从那里，你可以使用 Burst 引擎快速对其进行动画处理，并将其与 Canvas 上的其他内容混合。

查看演示

我还强烈建议你观看有关此演示如何构建的教程。他展示了使用 Inkscape、Burst 引擎和其他简单的 JS 来获取简单的绘图并对其进行动画处理是多么容易。这段视频值得一看。


观看视频 (.ogv) | 观看视频 (.mp4)

关于 Christopher Blizzard

一次发布，让网络更美好。

更多 Christopher Blizzard 的文章…

21 条评论

  1. Rick

    非常非常棒。

    2009 年 6 月 10 日 下午 8:34

  2. […] 使用 Canvas 和 Burst 制作 SVG 动画：https://hacks.mozilla.ac.cn/2009/06/rendering-svg-canvas-burst/ […]

    2009 年 6 月 11 日 上午 2:11

  3. […] Firefox 3.5 提供了更多功能。因为 Canvas 功能和 HTML5 视频本身就是一件大事。这里看起来像枯燥的材料，[…]

    2009 年 6 月 11 日 上午 3:08

  4. […] 刚刚发布了 Alistair MacDonald 的作品，他使用他的 Burst 引擎演示了如何获取 SVG 并让 Burst 加载它并将其全部转换为在 […] 内部呈现的 JavaScript 对象。

    2009 年 6 月 11 日 上午 5:54

  5. Anita

    太棒了，我非常喜欢这个 35 天系列。

    2009 年 6 月 11 日 上午 8:29

  6. Vance Dubberly

    刚刚完成了一个动画 SVG 美国地图。我真的很高兴 SVG 最终至少在一些浏览器中获得了不错的实现。我最终使用了 dojo gfx 工具包，因为，好吧，我使用 dojo，它有一个用于此类事情的库，但想法是一样的。

    需要注意的是，inkscape 非常 buggy。此外，虽然 SVG 中的简单动画运行得非常好，但越复杂，“帧率”越低，遗憾的是它远不如 Flash 干净。

    2009 年 6 月 11 日 上午 10:09

  7. […] 刚刚发布了 Alistair MacDonald 的作品，他使用他的 Burst 引擎演示了如何获取 SVG 并让 Burst 加载它并将其全部转换为在 […] 内部呈现的 JavaScript 对象。

    2009 年 6 月 11 日 下午 1:00

  8. Breton

    你所说的“干净”是什么意思？

    2009 年 6 月 11 日 下午 6:40

  9. Vance Dubberly

    @Breton 对不起，那很含糊。不是指代码或 API。我指的是回放。动画的流畅度。我们正在努力，但请尝试在 svg 或 canvas 中实现粒子系统……它会让你哭泣。

    2009 年 6 月 11 日 下午 7:17

  10. soso

    为什么不为此类内容使用 SMIL？
    好的，Firefox 没有原生 SMIL 支持，但 Fakesmile 可以完成这项工作。

    2009 年 6 月 12 日 上午 10:10

  11. Al

    这是 Burst 中的一个角色：http://hyper-metrix.com/burst/development/doc/demos/js/GitHub%27s-Octocat.htm

    它在 iPhone 上运行：http://hyper-metrix.com/burst/development/doc/demos/js/Octocat-iPhone/Octocat-iPhone.htm

    2009 年 6 月 13 日 上午 6:48

  12. Al

    @Vance Dubberly：我发现 Inkscape 的新“正式”版本运行得非常好。我通常使用预发布版本。

    2009 年 6 月 13 日 上午 6:51

  13. […] 周我们重点介绍了 Alistair MacDonald (@F1LT3R) 的一个演示，他在演示中展示了如何使用 Canvas 和一堆免费工具制作 SVG 动画。本周他为我们带来了另一个演示，展示了如何使用新的 […]

    2009 年 6 月 16 日 下午 6:34

  14. […] 上周 Alistair MacDonald（@F1LT3R）给我们带来过一个示例，向我们展示了如何使用 Canvas 制作动画 SVG 和很多免费的工具。这周他同样给我们带来了一个示例，向我们展示如何使用全新的 Firefox 3.5 audio 元素和一些 Canvas 和 JavaScript 来构建一个非常好看的音频播放器。在 Firefox 3.5 中查看演示 […]

    2009 年 6 月 17 日 上午 1:20

  15. […] 原文地址：使用 Canvas 和 Burst 制作 SVG 动画 […]

    2009 年 7 月 9 日 下午 10:53

  16. Stu Ross

    我对将矢量动画引入 iPhone 非常感兴趣。您什么时候发布 Burst？

    –Stu Ross
    新泽西州樱桃山

    2010 年 6 月 10 日 上午 10:47

  17. Jessie J

    嗯，看来演示不再有效了。不过视频教程仍然很好。谢谢！

    2011 年 12 月 20 日 下午 5:03

  18. sankekur

    我尝试了很多次，但仍然无法获得，我无法打开教程，我不知道为什么。

    2012 年 3 月 12 日 下午 10:39

    1. Robert Nyman

      不，抱歉，看来网站现在消失了。

      2012 年 3 月 13 日 上午 2:55

  19. kulturystyka sklep

    太棒了，我非常喜欢这个 35 天系列。

    2012 年 9 月 27 日 上午 9:04

  20. jak szybko schudnac

    通过您的文章，操作起来非常简单。谢谢。

    2012 年 10 月 1 日 上午 3:05

本文评论已关闭。