Adobe 最近发布了 Edge，这款类似 Flash 的工具可用于创建 HTML5/CSS3/JS 驱动的动画，从而在业界引起了不小的轰动。确实需要这样的工具，我个人也非常高兴看到 Adobe 认识到了这一点。其他试图解决相同问题的工具已经存在，例如即将发布的 Animatable 已经在一些会议上展示，以及领先的 Radi。

我更高兴的是，这引发了开发者社区之间的讨论——关于 HTML5 和 CSS3，有太多陈词滥调了，因此任何让我们重新评估现状的事情都是一个好主意。

据 Adobe 自己所说，Edge 在发布后的 24 小时内下载量就达到了 50,000 次，看起来很像很久以前的 Flash。

最初的反馈意见非常两极分化，Adobe 产品的粉丝将其誉为标准化动画的新纪元，而其他人则不那么印象深刻，正如英国的 .net 杂志报道的那样。这是可以预料的，因为现在所有带有 HTML5 标签的东西都会受到这种待遇。

那么 Edge 的内部机制是什么呢？

Anna Debenham 是最早尝试 回顾 Edge 并体验它的人之一。

如上图所示，用它生成的动画大小是固定的（像素或 em），并且全部由 JavaScript 和 CSS3 过渡混合而成。动画背后的引擎是 jQuery。在 Firebug 中查看，我们会看到很多带有定位和 CSS 过渡信息的 DIV 元素。

这与试图将 Flash 转换为开放技术解决方案的工具形成鲜明对比，例如 Google 的 Swiffy 所做的转换。Swiffy 使用 SVG 来模拟 Flash 基于路径的特性；Edge 没有这样做，而是依靠 DOM 对 DIV 元素的动画。

输出中完全缺乏 HTML5

这导致了开发者之间的主要困惑，并 在 Adobe 论坛上引发了更长时间的讨论，由 Rob Hawkes 发起。Rob 发现 Edge 的最初问题是它没有使用 HTML5 技术，如 Canvas 或其他 W3C 动画和绘图技术，如 SVG。

为什么 Edge 选择基于 div 的动画而不是其他技术，如 canvas 和 SVG？看到不仅在您发布的示例文件中使用了 div，而且 div 也是舞台和添加到其中的任何其他元素的默认选项，我感到非常难过。

Adobe 的回答是 动画 DOM 元素的速度更快，并且可以实现更好的浏览器兼容性，尤其是在移动设备上。

我们认真考虑过 Canvas，但目前在移动浏览器（尤其是 iOS）上的性能非常糟糕。我们不想让第一次体验产生无法正常运行的内容。请注意，这在 iOS 5 中可能会发生变化，所以这很好。最后，SVG 有点慢，尽管我们确实支持导入 SVG 元素并对其进行动画处理——只是无法深入其中。

性能问题是讨论中不断出现的一个问题。谷歌的许多动画也移动了 DIV 元素而不是使用 Canvas 和/或 SVG（还记得 爆炸球体徽标 吗？），同时又带有 HTML5 标签。

HTML5 游戏开发者以及 onGameStart 会议 的联合组织者 Kamil Trebunia 对 Canvas 在移动设备上速度过慢的担忧提出了质疑。好消息是在 Twitter 上的一场幕后讨论中，Zynga 德国的 CTO Paul Bakaus 指出，他们目前正在对该主题进行深入研究，并且他们很乐意在稍后阶段分享结果。因此，这是非常值得期待的事情，也是对 几个月前 Facebook 进行的 HTML5 游戏性能研究 的补充。

输出中缺乏语义

Edge 的另一个让开发者困惑的问题是生成的 HTML。正如 Morena Fiore 在 她的 Edge 演示 中所问的那样，当该工具的输出根本不包含任何语义 HTML 时，Adobe 为什么不使用 SVG 和 Canvas 进行动画处理，这似乎很奇怪。

文本内容、补间动画、定位以及动画的所有其他信息都位于 JSON 对象中。

Adobe 最初对这些问题的回答 是他们不想触碰原始 HTML，因为开发者不喜欢那样。

我们的方法是，我们将您添加的内容与底层 HTML 分离开来 *并且* 我们不会尝试像旧式工具那样编辑 HTML——总的来说，很多人不喜欢工具修改 HTML。

也就是说，如果人们希望我们这样做，我们将研究在未来减少添加到页面中的 HTML 的方法。

在我看来，这听起来像是一个滑坡。正如 Tobias Leingruber 在他的 Edge 演示中用尖酸刻薄的方式所展示的那样，缺乏语义和增强现有标记只是意味着我们现在用不同的技术创建 Flash 隧道页面，并且让你想知道 Edge 的主要用例是否是非 Flash 拦截器阻止的交互式广告。

这是任何工具都面临的挑战：我如何不仅允许人们创建，而且让他们意识到 Web 内容不仅仅是漂亮的动态图片？Animatable 的 Madmaninmation 演示就是一个很好的例子——它是一个纯粹的动画，但当你检查源代码时，它会回退到一个包含动画脚本的列表中。这使每个人都知道发生了什么，并有助于搜索引擎理解您的产品。Animatable 的每个用户都会对 Web 提供这种级别的支持，还是仅仅创建动画？

借助 Edge，Adobe 有机会为开放式 Web 技术做一些非常酷的事情。看看它将走向何方将会很有趣。

正如 Opera 的 Bruce Lawson 所说

设计师需要创作工具来帮助他们将创意转化为代码，而 Adobe 在制作设计师认为用户友好的 IDE 方面有着良好的记录。

因此，Adobe 需要为 Web 做正确的事情，并进一步推动 Edge 的发展（在讨论引发的研究的帮助下）。他们正在朝着这个方向努力，并且 声明他们正在积极寻求反馈。

Edge 将会快速发展——该产品远未完成。我们希望随着时间的推移，能够支持越来越多的 HTML 宇宙。Edge 目前支持 SVG 图形（您可以使用“文件”>“导入”导入 SVG 图像），但您还无法进入这些图形并对其组件进行动画处理。好消息是，我们的 JS 运行时能够执行包含各种 HTML 元素、SVG 元素甚至 Canvas 图形的动画，因此我们没有把自己局限住。

您希望 Edge 首先解决哪些增强功能？Canvas？嵌入式 SVG？选择除 DIV 之外的 HTML 标签的功能？

我个人很高兴看到 Adobe 比以往任何时候都更加高举开放式 Web 技术的旗帜。他们新的 The Expressive Web 展示网站就是证明。现在轮到我们对他们所做的事情表示反对，或者并肩合作，为我们那里的用户带来最佳的 Web 体验。