写点什么

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:296375

评论

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

让所有工具变成你的锤子 — 邂逅《Every Tool's a Hammer》

蔡超

方法论 学习笔记 软件架构

Python代码阅读(第74篇):单词首字母转换成大写

Felix

Python 编程 字符串 阅读代码 Python初学者

Milvus 2.0 正式 GA

Zilliz

数据库 AI

为什么你辛苦肝的博客没人看?搭框架、排版、画图技巧这些你真的懂么?

码哥字节

排版规范 写作技巧 2月月更

低代码实现探索(三十一)管好你的组件--元信息

零道云-混合式低代码平台

(2-2|27)🤗Huggingface.Transformers是什么?

mtfelix

300天创作

聚力同行,迈向零碳未来

大咖说

云计算 阿里巴巴 阿里云 数智化

云效交付篇:流水线持续交付 | 云效快速入门

阿里云云效

阿里云 DevOps 云原生 持续交付 研发

2021 Apache Pulsar 中文社区先锋奖与年度优秀案例奖出炉!

Apache Pulsar

开源 云原生 中间件 Apache Pulsar 社区

职场焦虑之我对35岁危机的看法

老张

35岁危机 职场发展

虎年开工大吉|Hoo研究院2022年0207期区块链简报

区块链前沿News

Hoo 虎符交易所 虎符研究院 虎年

GitLab + Jenkins + ACK 自动化部署方案

百瓶技术

运维 jenkins 自动化部署 #GitLab ACK

Java常见数据结构详解

编程江湖

盘点下近几年退役的顶级 Apache 大数据项目 - 继 Sentry,Sqoop 之后,Ambari 正式退役

明哥的IT随笔

大数据 ambari sqoop sentry

在线标准程序员计算器

入门小站

工具

Apache POI详解及Word文档读取示例

程序员架构进阶

Java Apache POI 2月月更

春节消费观察:四种愉悦感,抓住女人心

脑极体

Hadoop运行环境搭建

编程江湖

hadoop

Apache Druid 在 Shopee 的工程实践

Shopee技术团队

数据库 后端 Apache Druid

Serverless 应用优化四则秘诀

Serverless Devs

Serverless

人人都是 Serverless 架构师 | 弹幕应用开发实战

Serverless Devs

Serverless 弹幕 应用开发

微服务从代码到k8s部署应有尽有系列(一)

万俊峰Kevin

Go 微服务 web开发 go-zero RPC框架

抽奖| Apache Pulsar 社区新年福袋来啦

Apache Pulsar

开源 云原生 中间件 Apache Pulsar 社区

架构实战营模块七 作业

Jude

架构实战营

一人走路不孤独,小度化身百度地图导航NPC,伴你回家路

百度大脑

暂时不在更新

你?

Serverless 年终技术盘点 :工业、学术、社区遍地开花

Serverless Devs

云计算 阿里云 Serverless

容器编排技术 Kubernetes 学习总结|社区征文

架构精进之路

云原生 新春征文 2月日更

Apache Pulsar 2021 年度盘点(结尾有惊喜)

Apache Pulsar

开源 云原生 中间件 社区 Apachepulsar

Linux之free命令

入门小站

Linux

模块七作业

whoami

「架构实战营」

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