Adobe HTML5动画新工具Edge试用手记

作者 Ryan Liu 发布于 2011年8月4日

领域

运维 & 基础架构,

过程 & 实践,

架构 & 设计,

语言 & 开发

主题

HTML 5 ,

Java ,

语言 ,

Websphere ,

HTML ,

编程 ,

IBM ,

标识语言 ,

Flash ,

应用服务器 ,

Adobe ,

企业级敏捷 ,

敏捷 ,

Edge ,

工具 ,

用户体验 ,

RIA

8月1日，Adobe刚刚在Lab发布了Edge预览版，Edge是一款制作基于HTML5、CSS3和Javascript等标准的动画和交互效果的工具。虽然HTML5一直剑指Flash，但Adobe在继续增强Flash的同时，也在积极发展其产品对HTML5的支持。今年3月，Adobe发布了Wallaby预览版，一个可将FLA中动画输出为HTML5的工具。跟Wallaby相比，Edge更像是Adobe真正的HTML5动画和交互设计解决方案。下面跟大家介绍一下我的试用体会。

打开Edge，乍一看，几乎和Adobe的After Effects（后面简称AE）界面一模一样(参考图1：After Effects和Edge界面对比)。工具栏的布局跟AE一样，Elements面板与AE的Project面板相似，时间轴也几乎跟AE的一模一样，只有Properties属性面板和Flash是一样的，我本以为Edge的界面会更像Flash。我觉得应该是因为HTML里的元素基本都有众多的CSS属性，而AE这种一层时间轴对应一个属性的界面能使动画操作更精准、更有组织，但代价就是，一个圆角矩形元件有可能展开14层之多的时间轴(如图2：圆角矩形的属性所示)。或许，Edge也可以模仿AE，把同类属性放在一条时间轴里。

图1：After Effects和Edge界面对比

图2：圆角矩形的属性

 

当前的Edge界面十分简洁，工具栏除选择工具之外，只有一个文字工具、一个矩形和一个圆角矩形工具（两个矩形工具画出的结果是一样的），整个界面只有Properties、Elements和Timeline三个面板，仅仅满足了动画制作地基本支持。

除了文字和图形，你还可以导入外部图片做素材。这一点，Edge和AE也很类似，以处理和操作外部素材为主，毕竟HTML输出还不是一个图形环境，不可能像Flash一样绘制大量的图形。但某些方面HTML有自己的特点，例如圆角矩形的属性在CSS里有丰富的定义，通过操作这些属性，如每个圆角的半径，你可以很轻松的实现在Flash中很麻烦的动画效果。想象一下CSS中各种元素丰富的属性，我相信这种“属性驱动”的动画制作方式能给网络带来一些新的灵感和新的设计方法。有一点需要提一下，对于图片素材，修改属性面板里的宽和高实际是修改图像clipping区域的宽和高，并不是修改图片本身，在画布上拖拽图像边缘也是同样只修改了clipping区域。如果想调整图片大小呢？设置缩放（scale）的值就好。(参考图3：图片的裁剪操作)这也算是实现了图片素材的遮罩。

图3：图片的裁剪操作

 Edge里动画的制作很直接，只要你有动画经验，即使没用过AE，也很容易上手。时间轴支持关键帧的自动建立，即当你在一个时间点上改变元件属性时，时间轴会自动建立一个关键帧，并且生成和其他关键帧之间的transition（不叫tween了）。时间轴还支持关键帧的删除和拖动，单条或若干条一组transition的拖动。transition有自己的属性面板，除了修改长度、起始和结束时间，还可以添加easing。easing是动画制作的灵魂，Edge提供了很丰富的easing类别，但还没有类似Flash或AE的可编辑的easing曲线操作，现在也没有常用的遮罩（前面所介绍的图片只实现了矩形遮罩）和动画引导线功能。Adobe官方的例子里有一段过山车沿着轨道走的动画(图4：官方的过山车动画源文件)，曲线的动画完全是用关键帧堆出来的，不但制作很麻烦，而且做完之后再修改会很要命。

图4：官方的过山车动画源文件

总结一下，Edge确实提供了一个基本的HTML动画编辑环境，设计师们不用死磕代码，也可以较快速地制作出常规的动画效果，目前版本的Edge功能有限，还不足以供设计师和动画师们大展身手。如果你有对HTML和CSS的了解，会有助于你理解为什么Edge是这个样子，为什么有些功能不能跟Flash或者AE一样。希望下一个版本的Edge能继续完善动画功能，同时加入对交互的支持，HTML里动画的发挥空间暂时还有限，交互效果才是当前主流的需求。Edge是一个开始，我希望Adobe能继续完善和增强，以提供给大家一个强大的HTML设计工具，给网络（尤其是移动平台上的）带来更丰富的内容。

Adobe官方提供了一些范例效果和源文件，大家可以看看。我也做了一个简单的例子给大家参考。

关于作者

Ryan Liu ，资深互动设计师，从2001年起从事以Flash为主的互动项目设计和开发工作。曾任奥美互动多媒体总监，现任IGT中国研发中心主管工程师。 作者博客：www.ryan-liu.com/blog。

1. 返回顶部

   我也用EDGE试做了一小段动画，希望和大家交流。

   发表人 树韬 shutao.info

   我也用EDGE试做了一小段动画，希望和大家交流。
   
   shutao.info/html5/edgeMotion.html

   回复

2. 返回顶部

   学习

   发表人 李 振璟

   很强大，下来学习一下，adobe也没有放弃对html5的支持，努力补充自己知识面
   singpenguin.com

   回复

3. 返回顶部

   XP无法使用啊

   发表人 韩 冬

   为什么？为什么XP不能用啊

   回复

4. 返回顶部

   和blender差不多

   发表人 无 趣

   界面风格都一样

   回复

5. 返回顶部

   1111111111

   发表人 Terry Mao

   兴奋的下完，然后一点开。。最高系统要Vista。。。于是我震精了。

   回复

• 更早的 >