BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 Ryan Liu 关注 0 他的粉丝 发布于 2011年8月5日. 估计阅读时间: 5 分钟 | CNUTCon 了解国内外一线大厂50+智能运维最新实践案例。

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界面对比

Adobe Effects

Edge

图2:圆角矩形的属性

 round_rectangle

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

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

图3:图片的裁剪操作

imageclipping

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

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

wheel

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

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

关于作者

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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

我也用EDGE试做了一小段动画,希望和大家交流。 by 树韬 shutao.info

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

shutao.info/html5/edgeMotion.html

学习 by 李 振璟

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

XP无法使用啊 by 韩 冬

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

和blender差不多 by 无 趣

界面风格都一样

1111111111 by Terry Mao

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

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

5 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT