【QCon】精华内容上线92%,全面覆盖“人工智能+”的典型案例!>>> 了解详情
写点什么

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

  • 2011-08-04
  • 本文字数:1749 字

    阅读完需:约 6 分钟

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

2011-08-04 08:296016

评论

发布
暂无评论
发现更多内容

数据采集&流批一体化处理使用指南

大河

批处理 ETL 流处理 bboss 流批一体化

测试同学职场成长的关键要素

老张

团队管理 个人成长

为研发效能度量找到合适的参照系

思码逸研发效能

研发效能 效能度量

面试造火箭?GitHub飙升“2023(Java 岗)面试真题汇总”转载40万

三十而立

Java 互联网 IT java面试

谈谈低代码的安全问题,一文全给你解决喽

加入高科技仿生人

软件开发 低代码 信息安全 低代码开发

EasyExcel 带格式多线程导出百万数据

三十而立

Java 互联网 IT

用这三本书,探究 ChatGPT 的底层逻辑

图灵社区

深度学习 GPT #人工智能 ChatGPT

注意!2023,你需要了解这些IT趋势

引迈信息

人工智能 程序员 网络安全 低代码

爱因斯坦霉霉同框只需15秒,最新可控AI一玩停不下来,在线试玩已出丨开源

Openlab_cosmoplat

开源社区 AI绘画

选择KV数据库最重要的是什么

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 企业号 3 月 PK 榜

分享:FactorJoin,一种新的连接查询基数估计框架

OceanBase 数据库

数据库 oceanbase

4.0 功能抢先看 | 读懂一个项目的研发效能 之 项目交付效率

思码逸研发效能

研发效能

Springboot 撞上 NebulaGraph——NGbatis 初体验

NebulaGraph

Java ORM 图数据库

分享:ODC 如何精准展现 SQL 执行的耗时?

OceanBase 数据库

数据库 oceanbase

自学黑客/网络渗透,一般人我劝你还是算了

网络安全学海

黑客 网络安全 安全 信息安全 渗透测试

对话数十位学术合作代表:如何提升前沿技术在商业领域的落地应用?

阿里技术

前沿技术

裸辞底气!GitHub飙升“java面试笔记2023” 了解下八股文天花板

三十而立

Java 互联网 面试 IT java面试

文本数据标注,支持词典导入及更多快捷方式|ModelWhale 版本更新

ModelWhale

机器学习 数据分析 云平台 标注 标注工具

9000字,通俗易懂的讲解下Java注解

Java你猿哥

Java ssm 实战 Java工程师

3 天交付新需求?极狐GitLab APP 「极限编程 XP」实践

极狐GitLab

DevOps 敏捷开发 CI/CD 极限编程 极狐GitLab

HarmonyOS 联合绿盟发布折叠屏软件规范,携HUAWEI Mate X3带来创新折叠体验

科技汇

让Web和App无缝链接的移动深度链接方案

MobTech袤博科技

ChatGPT4 给出数据库开发者最容易犯的10个错误和解决方案

NineData

数据库 程序员 开发者 dba ChatGPT

华秋电子受邀参加产业高峰论坛,探讨电子行业新商机

华秋电子

用这三本书,探究 ChatGPT 的底层逻辑

图灵教育

深度学习 GPT #人工智能 ChatGPT

软件测试/测试开发丨app自动化测试之设备交互API详解

测试人

软件测试 自动化测试 测试开发 appium

EasyExcel 带格式多线程导出百万数据(亲测牛逼)

三十而立

Java 互联网 IT 程序猿

集成化、小型化、大势所趋,模块电源优势明显

华秋电子

Apache HugeGraph1.0.0 版本正式发布!

百度安全

LP流动性挖矿代币分红模式dapp系统开发原理

开发微hkkf5566

分享:如何给 DBA 减负?

OceanBase 数据库

数据库 oceanbase

Adobe HTML5动画新工具Edge试用手记_Java_Ryan Liu_InfoQ精选文章