写点什么

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

评论

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

低代码之火,何以燎原?

BeeWorks

ImageKnife组件,让小白也能轻松搞定HarmonyOS图片开发

HarmonyOS开发者

HarmonyOS ArKUI 3.0

首版架构师全栈”成长笔记“一经发布就获得一致好评,我不允许你没看过

Java架构追梦

Java 程序员 java面试 后端开发

“数聚赋能”,让实时数据中台成为惠企、惠民政策服务应用的源头活水

tapdata

数据中台 数字政务 实时数据 智慧政务

浅谈商业模式---《北大-真格创业课》笔记(30/100)

hackstoic

商业模式 创业公司

web前端培训Vue3 setup() 启动函数的原理

@零度

前端开发 Vue3

看端点科技如何以行业实践探索企业数字化转型新路径

科技热闻

Android C++系列:vector最佳实践

轻口味

c++ android 4月月更

直播回顾:SIMD 指令集在 OpenJDK 中的现状与未来 | 龙蜥技术

OpenAnolis小助手

Java Openjdk simd arm 龙蜥社区

观测云新增俄勒冈站点,布局全球可观测服务网络

观测云

时序数据库 VS 工业实时数据库

CnosDB

IoT 时序数据库 开源社区 CnosDB infra

不面试别看!字节跳动2022年Java架构师岗面试题(试行版)发布

Java架构追梦

Java 程序员 java面试 后端开发

PlatoFarm生态进展不断,通缩推动PLATO价值提升

小哈区块

「可视化案例Vol.3」数字孪生可视化园区,开启园区智慧管理新篇章

ThingJS数字孪生引擎

物联网 可视化 数字孪生

博云首批通过欧拉技术测评,联合解决方案通过验证

BoCloud博云

新闻

PlatoFarm生态进展不断,通缩推动PLATO价值提升

西柚子

新思科技连续六年获评Gartner魔力象限领导者殊荣

InfoQ_434670063458

新思科技 应用安全 Gartner

服务器与普通台式机的对比及发展趋势

Finovy Cloud

gpu 云服务器 GPU服务器 GPU算力

最佳实践 | 运维效率提升10倍的秘诀

星汉未来

DevOps 云原生 智能运维

【国产】ETL自动化调度运维管理平台 TASKCTL 8.0 分布式部署

敏捷调度TASKCTL

Docker DevOps 国产开源 大数据运维 TASKCTL

算法交易的最佳编程语言是什么?

非凸科技

rust 编程语言 交易系统 策略

Tapdata Cloud 2.1.4 来啦:数据连接又上新,PolarDB MySQL、轻流开始接入,可自动标记不支持的字段类型

tapdata

SaaS 云数据库 Real Time DaaS polarDB DaaS

多商户商城系统如何对接电商收付通?

CRMEB

一文看懂博睿数据AIOps场景、算法和能力

博睿数据

阿里云弹性计算对视觉计算的思考与实践

阿里云弹性计算

Metaverse 视觉计算

DeepMind爆发史:决定AI高峰的“游戏玩家”|深度学习崛起十年

OneFlow

人工智能 深度学习 DeepMind AGI

2022,「大厂云」还在找新着力点

ToB行业头条

全网最细的短网址系统设计与实战

星牛君

MySQL redis 布隆过滤器 Java EE

基于云效AppStack实现环境管理 | 开箱即用

阿里云云效

阿里云 研发管理 研发 应用交付 环境管理

高级Java面试经验总结:多家大厂简历优化+面试题目+面经+薪酬等

Java架构追梦

Java 程序员 面试 后端开发

新品发布 | OpenHarmony面向教育行业的发行版+大赛预告来了~

拓维信息

活动 操作系统 OpenHarmony OpenAtom OpenHarmony OpenHarmony 3.1 Release

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