记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航

[HTML5/CSS3] 基于Edge Animate可视化工具开发CSS3动画[含7P]

[复制链接]
发表于 2017-6-11 20:33:34 | 显示全部楼层 |阅读模式
       今天这篇文章主要介绍透过Adobe Edge Animate这款可视化工具操作CSS3的动画,与前一篇文章的根本区别就是Edge Animation制作动画是可视化的,操作CSS3动画的方式是和JavaScript的JQuery相结合完成动画控制的过程。Edge Animate 工具包含了一套称为Runtime的运行时环境,包含了可以触发鼠标,触摸和时间轴多种方式的交互API,这些交互操作命令可以被应用到独立的可视化的对象上,或者用于时间轴上一系列的可触发对象上。


       注:下载Adobe Edge Animate 1.5需要注册成为Adobe Creative Cloud成员,点击这里注册下载


       Adobe Edge Animate是一个提供可视化设计UI的应用开发软件,界面有很多地方跟Adobe其他的工具如After Effects或Flash Pro类似,如果你以前操作过这些软件,那么Edge的用户界面你将会感觉非常熟悉。Edge Animate这款软件最早的一个原型是基于Adobe AIR制作的,2010年5月时,Adobe在全球的MAX大会上展示了它,通过它,可以制作输出由HTML,CSS和JavaScript组合控制的浏览器动画内容,而不需要可以播放SWF的Flash Player。经过近1年多的反复修改,Edge Animate近期发布了它的1.5版本,功能和稳定性上已经跟最早的那个Prototype完全不同。


       Edge Animate主要使用HTML5,CSS3和JavaScript。HTML5是其用于创建的doctype,2D的transform,translate,rotate,scale,skew等特效都是渲染为CSS3,如果是最新版本的浏览器,可以操作纯粹的CSS3,如果是主流大众浏览器,Edge Animate则会通过JavaScript库的配合来保证HTML和CSS的显示兼容性。Edge Animate里嵌入的JavaScript库主要是JQuery。


       在开始玩Edge Animate前,你可能有个顾虑,就是Edge Animate如果要做交互动画,生成的内容是否会打破已有的HTML文件代码结构?答案是不会。通过Edge Animate生成的HTML代码少之又少,几乎都可以用下面的代码表达方式来概述:

<div id=”Stage” class=”EDGE-xxxxxxxxxx”></div>



       而相关的动画内容则会全部以代码块的形式嵌入上面的div中,修改和删除都不会影响原有的HTML项目代码,对HTML中元素的操作都通过JSON对象和引入的JavaScript来完成。


       上面提到了,Edge Animate中主要嵌入了JQuery库,业界跟JQuery有功能上类似的大大小小的开源库有几百个,选择嵌入JQuery就是因为JQuery库的成熟程度,被采纳的程度,成功案例数量都处在世界一流水准。可能有人说,它在性能上,不如某些库;在兼容性上,不如某些库;在文件大小上,又不如某些库,但是Edge Animate作为一款通用型的工具,嵌入JQuery是处于各种设计考量平均后得出的选择,另外,JQuery对于不会写代码的设计师也非常友善,这也是很重要的一点。其实Adobe Dreamweaver CS6内也有很多功能依赖于JQuery库。


       Edge Animate使用JSON来存储元素的定义和属性。举个例子,下列的JSON代码段就是在Stage上定义一个椭圆对象:

content: {
         dom: [
         {
            id:'Ellipse',
            type:'ellipse',
            rect:['206px','76px','179px','181px','auto','auto'],
            borderRadius:["50%","50%","50%","50%"],
            fill:["rgba(77,214,240,0.76)",[270,[['rgba(136,92,204,1.00)',0],['rgba(255,255,255,1.00)',100]]]],
            stroke:[0,"rgba(0,0,0,1)","none"]
         }],
         symbolInstances: []
      }


       而这个椭圆对象,在Edge Animate的Stage上体现出来的是下图的样子。


基于Edge Animate可视化工具开发CSS3动画 浏览器,Flash,Adobe,文章,动画 【HTML】 203402tbl8t7dqhptdi7n9 1




       Adobe Edge Animate中的Runtime我觉的有必要解释一下,这个Runtime并不是以前我在博客中经常提到的Flash Player或AIR运行时,这个Edge Runtime就是特指通过Edge Animate工具定义的一组文件集合,由它来支持动画的运行,那么这个文件集合就是Edge Animate的运行时环境。例如,下面的代码就是Edge Animate生成的,其中include的script就是运行时文件集合中的一个。

<script type="text/javascript" charset="utf-8"src="JSONTest_edgePreload.js"></script>


       Edge Animate工具打开后,也会看到一个Timeline,如下图。


基于Edge Animate可视化工具开发CSS3动画 浏览器,Flash,Adobe,文章,动画 【HTML】 203402lt0vv0stxjsiv5z0 2




       与Flash Pro里的基于关键帧的时间轴不同,Edge Animate的时间轴是基于时间的,跟After Effects更像,但是Edge Animate仍然可以定义关键帧动画。Edge Animate里没有像Flash里对元件是MovieClip,Button或是Graphics的定义,我们可以很简单的把Edge Animate中处理的元素全部看成是MovieClip元素。接下来,我们就在Edge Animate来摸索一下CSS动画的制作。


       我们先cmd+N建立一个新的Edge项目(或者在Edge Animate打开后开启的欢迎界面的左侧点击Create New来创建):


基于Edge Animate可视化工具开发CSS3动画 浏览器,Flash,Adobe,文章,动画 【HTML】 203402dt3ltu25yk3vdvlf 3




       图中的空白区域,就是Edge Animate生成的动画Stage舞台,在HTML源代码中会表示为下面的代码:

<div class=”EDGE-572947464″ id=”Stage”></div>



       cmd+s保存后,Edge Animate会为这个空白项目自动生成下列结构的文件集合。


基于Edge Animate可视化工具开发CSS3动画 浏览器,Flash,Adobe,文章,动画 【HTML】 203402zqqvpzvy2ww2wseo 4




       这个文件结构中的文件分别表示下列含义:

  • first_ani.an,Edge Animate项目文件,双击它会直接打开Edge Animate软件,该文件中保存了你在Edge Animate软件里处理项目的信息,比如面板排列,字体显示,色彩设定等等,跟Flash CS6保存的fla文件类似。
  • first_ani.html,项目的入口页面,可以理解为Edge Animate制作的动画首页面,它的代码里又链接了所有与动画有关的文件资源。
  • first_ani_edge.js,包含了所有Edge Animate项目里关联的JSON结构,声明Edge Animate动画的根本信息。
  • first_ani_edgeActions.js,包含了动画所有实例的脚本信息。



       edge_includes文件夹,包含了2个js文件,jquery-1.7.1.min.js是最小化的jQuery库,edge.1.5.0.min.js是最小化的Edge Animate运行时的JavaScript库,因项目需要,这个文件夹include的文件数目可能达到4个。


       Edge Animate的工具界面默认情况下包含了7个Window面板,均可以通过菜单的Window选项开启和关闭,分别是Tools工具,Properties属性,Stage场景,Elements元素,Library库,Timeline时间轴和lessons课程,如下图。此外还包括一个默认关闭的Window面板:code代码。关于面板的作用,我這裡不做过多的介绍,在以后的操作中,自然就会了解。


       在第一部分的教程里,我们用Edge Animate制作一个简单的动画特效。首先,使用工具栏中的字体工具在场景中写下一行字:Adobe Edge Animate.然后将其拖拽到场景中央,之后选中该字体,在Properties属性面板里找到Text栏目,可以为你输入的字体选择一项字体,你也可以选择一项Adobe Creative Cloud提供的云服务字体,此外,你还可以定义属于你的字体(可以靠这项调用中文字库,其实custom项就是定制font-family属性)。下图是针对上面的几步操作步骤:


基于Edge Animate可视化工具开发CSS3动画 浏览器,Flash,Adobe,文章,动画 【HTML】 203402iag0zpukpov5xz0c 5




       选定时间轴上的text层,点击右键,选取Add Keyframes,选择Text Shadow Offset(H),生成一个针对该文字的Shadow水平偏移特效层。重复上面的操作,加入Text Shadow Offset(V)和Text Shadow Blur Radius层。操作结束后的结果如下图所示:


基于Edge Animate可视化工具开发CSS3动画 浏览器,Flash,Adobe,文章,动画 【HTML】 203402k0azarlwrad55bi0 6




       接下来,选中时间轴上方的播放头,拖拽移动它到0:00.250的位置(0.25s),然后分别点选三个CSS文字特效层名称右边的“小菱形按钮”在0.25s位置添加新的关键帧。将时间头移动回到0s的位置,选中Text Shadow Offset(H)名称右侧的黄色数值,填入-4,Text Shadow Offset(V)右侧的黄色数值填入-2,Text Shadow Blur Radius右侧的黄色数值填入2。将时间头移动到0.25s位置,在Text Shadow Offset(H)名称右侧的黄色数值,填入4,Text Shadow Offset(V)名称右侧的黄色数值填入2,Text Shadow Blur Radius名称右侧的黄色数值填入1。将时间头移动到0:00.500(0.5s)处,仍然为三个特效层添加关键帧,数值分别输入0,0,2。操作结束后的时间轴如下所示:


基于Edge Animate可视化工具开发CSS3动画 浏览器,Flash,Adobe,文章,动画 【HTML】 203402u5n4zj6fqkkhn644 7




       设定完成后,保存,点击上图左上角的三角播放按钮,预览特效。你也可以打开html所存储的文件夹,用浏览器浏览Edge Animate的html文件的动画。


       这个范例的下载地址在这里


       今天本部分的教程就到这里,下一部分的教程会继续深入讨论Edge Animate的动画制作过程。
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表