收稿日期:2013-03-02 修回日期:2013-06-08 网络出版时间:2013-09-29基金项目:广东省高等学校大学生创新实验项目(201002017)
作者简介:平淑文(1991-),女,硕士研究生,研究方向为计算机图形图像技术二移动互联网开发;杜晓荣,通讯作者,教授,研究方向为软件开发
方法及支撑环境二图形图像技术及应用等三
网络出版地址:http ://https://www.doczj.com/doc/e21187308.html, /kcms /detail /61.1450.TP.20130929.1523.029.html
基于HTML5和JavaScript 轻量型动画框架开发
平淑文,潘珏羽,张学金,杜晓荣
(中山大学电力电子与控制技术研究所,广东珠海519082)
摘 要:互联网作为一个新兴的媒介,最突出的优势就是图片和动画展示,利用动画引擎可以很方便地实现网页动画显示和制作网页游戏三首先简要介绍了HTML5和动画引擎的概念,及相较于FLASH 等现有技术,使用HTML5制作动画的优势所在三然后详细介绍了基于HTML5和JavaScript 开发的轻量型动画引擎,从结构和算法方面介绍了滤镜二物理效果二路径设置等具体方法,提出了表单式编程概念三最后简要介绍了利用该引擎制作的动画实例,分别展示了动画滤镜效果和路径动画效果三
关键词:HTML5;轻量型;动画;引擎
中图分类号:TP311.52 文献标识码:A 文章编号:1673-629X (2013)12-0005-06doi:10.3969/j.issn.1673-629X.2013.12.002
Development of a Lightweight Animation Engine Based
on HTML5and JavaScript
PING Shu -wen ,PAN Jue -yu ,ZHANG Xue -jin ,DU Xiao -rong
(Institute of Power Electronics &Control Technology ,Sun Yat -Sen University ,Zhuhai 519082,China )
Abstract :As a new medium ,the most important advantage of the Internet is the display of pictures and animations.It is very easy to make an animation or webgame with an animation engine.Firstly ,introduce the basic concepts of HTML 5and animation engine ,and advantages of making animations with HTML 5,compared with the existing technologies like FLASH.Then introduce the lightweight animation en?gine based on HTML 5and JavaScript in details ,describe the structure and algorithms of filter ,physical effects ,path setting and so on ,and propose the concept of form programming.At the end ,there are some examples made with this engine ,and it shows the effects of anima?tion filter and path animation.
Key words :HTML 5;lightweight ;animation ;engine
0 引 言
互联网作为一个新兴的媒介,日渐成为网络游戏二电子商务等大展拳脚的平台三相比传统媒介,它最突出的优势就是图片展示和动画展示三试想,当打开一款优秀的网络游戏时,最先被吸引到的一定是精美的人设和场景;而当打开淘宝网的主页时,一定首先被搜索框下面的大幅滚动图片广告吸引三所以,作为众多商家和企业宣传自身的重要平台,互联网在如今的电子商务和电子产品中,显得非常重要,而铺天盖地的动态图片展示自然也成为网站盈利的重要组成部分,如何快速地制作精美的动画,从而吸引人们的注意,渐渐成为网页设计者们所关注的问题三
1 动画框架
1.1 什么是动画框架
游戏的核心在于动画,没有动画,就只能玩一些猜字和数独等小游戏;而广告的本质也是动画三因此,动画编程在游戏编程和广告设计中是非常重要的三
动画其实只是一系列快速显示的二只有微小差别的图像,由于人眼的敏感性较低,所以会认为这些变化就是移动三人眼能够感觉到的动画是至少每秒12帧,即每秒更换12幅图片,但为了良好的动画效果,一般的动画采用的是24帧每秒三在动画编程的同时,需要考虑的是处理器和系统的负担,因此为了平衡动画的帧数和系统的负担,会根据不同的需要设置合适的更
第23卷 第12期2013年12月 计算机技术与发展COMPUTER TECHNOLOGY AND DEVELOPMENT
Vol.23 No.12
Dec. 2013
新时间间隔三2D帧动画是最基本的动画技术,它主要是通过显示一系列预先生成的二静态的帧图像来实现动画三
虽然目前已经有各种各样的技术可以帮助人们制作一个完整,甚至精美的动画,但是还是希望可以找到一个方法,在保证质量的同时,追求效率三动画框架就可以满足这项需求三动画框架一般包括基本的绘制和更新函数,只需要利用框架的函数,就可以很简洁二方便地实现动画功能三
利用动画框架制作动画,可修改性强,可以很方便地通过动画的某些特征检索并修改二删减该动画;可扩展性也很强,利用已有基础动画类型,修改部分参数就可以创建一个新的动画类型;代码复用率高,使得编程变得更高效[1-3]三
1.2 现有技术
目前实现网页动画的途径主要有Adobe Flash二第三方插件和HTML5,三者各有特点三Flash是较为传统的技术,使用面积最广,目前市面上超过75%的网页游戏及动画都基于该技术三2012年Flash11推出后,能良好地实现3D画面渲染,较过去有很大改善三使用第三方插件运行的网页动画也占有着一定比例,插件扩展了浏览器的功能,但同时带来了插件安装的麻烦,以及潜在的安全隐患三
HTML5是实现网页动画的一条新途径三Canvas 元素二WebSocket技术以及WebGL标准的出现,为网页提供了新的编程接口,使网页游戏开发更加便捷三与其他技术相比,HTML5有两点主要优势,首先HT?ML5标准及其相关技术均免费开放,规范并且易于推广;另外HTML5标准免去了安装插件的必要,减少了用户的麻烦,提高了安全性[4-5]三
2 基于HTML5和JavaScript的轻量型动画框架
对于一款游戏框架而言,动画框架是其最基本的绘制显示子部分,而对于广告制作,只需要最基本的绘制和滤镜等功能即可,不要诸如碰撞检测二人机交互等功能三所以,从根本上讲,动画框架就是加入了输入输出和碰撞检测等功能的绘制框架三从细节上,基于HTML5和JavaScript的动画框架可以完成以下工作: (1)图形绘制:动态图形需要绘制在画布上,才能展现在观众和玩家面前;
(2)路径设置:大部分动画不是固定在画布上某一个位置的,比如一条鱼,它往往会在大海中游来游去,不会静止在某一个固定的地方,所以设置移动路径和移动速度也是赋予动画灵魂的关键;
(3)滤镜效果:有些时候,希望给动画添加一些PS 效果,以增加一些真实感,比如将鱼的透明度进行设置,以模仿不同深度的鱼;
(4)物理效果:为了提高真实感,希望动画中的角色遵循正确的物理原理,展现出和现实生活中一样的物理效果,所以物理效果的添加对于一个动画的真实感十分关键[6]三
2.1 结 构
动画框架分为三部分:舞台类二对象类二工具类三
为了方便控制和操作,将所有的动画实例放在一个舞台上,只需要像个导演一样总的调控二控制舞台即可,这个舞台即由舞台类实例化得到,这里,舞台类仅包括一个类三它可以实现舞台初始化二绘制所有动画等功能三舞台类也是直接面向用户的接口层,用户只需要搞清楚这个类的基本用法就可以绘制最基本的动画三
对象类的实例就是舞台上的一个一个动画,所以,对象类的功能就是创建动画三它包含动画类二鱼实例类二太阳实例类三个类三可以实现图片分割二图片绘制二路径设置二添加滤镜二添加物理效果等基础功能三图片分割可以将一幅多帧图片分割为一帧一帧的图片,并将其存入数组,这个步骤一般在初始化时完成,所以绘制时无需再分割图片,可以大幅度提高绘制速度;路径设置即根据用户设置的参数:动画的初始位置以及速度,计算每帧图片显示的具体位置;滤镜函数可以为图片添加不同的滤镜效果,以增加真实感;添加物理效果可以使动画角色表现出诸如自由落体运动二匀速直线运动二反弹之类的物理效果,使得动画真实感更强;利用绘制函数,将已经准备就绪的图片绘制在画布上三鱼实例类二太阳实例类两个类继承自动画类,只是重载了动画的路径设置功能,用户可根据自身需求,扩展其他的动画实例类三
这里的工具类主要功能是为对象类提供具体的滤镜算法,有高斯模糊二色彩变换二透明度设置等多个类三它们之间不存在继承关系三
2.2 实 现
该动画框架的开发过程中,使用HTML5+JavaS?cript语言,该框架的结构图如图1所示三
下面按照功能分类来介绍一下这个动画框架三2.2.1 舞台类
舞台类只包含stage类,主要包括两个功能,初始化和绘制舞台三
(1)初始化三
初始化函数 initialization,遍历整个传入舞台的图片数组,根据每一项中的type参数,创建相对应的对象实例,并将其放入舞台中三紧接着,完成初始化过程中最重要的一步,调用滤镜函数,分割多帧图片,将
四6四 计算机技术与发展 第23卷
每一帧存入数组中,方便接下来绘图使用三同时,如果该对象需要使用滤镜,也在这里完成,这样数组中保存的图片就是切割好,已经添加过滤镜的,绘图函数可以直接使用
三
图1 动画框架结构图
这里传入舞台的图片数据数组保存了整个动画中所有的数据,动画框架会根据这个数组自动创建相应对象实例,添加滤镜二设置关键帧二分割图片二添加物理效果二设置路径,最后完成绘制三用户在编程时,只需要根据数组中对象的名称,填入正确的数据即可,对于不熟悉JS,甚至完全不懂JS的用户都非常容易实现三
(2)绘制舞台三
该函数会由用户在外部,每隔一段时间调用一次,它会清除整个画布,然后遍历整个图片数组,将其中的每一个对象的合适帧绘制在舞台上三究竟绘制第几帧,将由函数的入口参数决定三
2.2.2 对象类
对象类包括sprite类二fish类二sun类三其中sprite 是基类,下面重点介绍它三
(1)切割三
为了保证接下来的绘图速度,首先需要切割图片三其实这里的原理很简单,就像是包装牛皮糖三制作好的牛皮糖都是一整张,很多很多个糖,而包装纸是一块糖一张的,师傅们会按照一块糖的尺寸把整张牛皮糖剪成一块一块的,一张糖纸放入一块三然后把包装好的糖放入大的包装袋中,这样就把整块的牛皮糖,变成了一袋独立包装的牛皮糖,当你想吃某一块或者把哪一块送给朋友时,你只需要对这一块进行操作就好三同样的道理,这里把整张的牛皮糖换成一幅多帧图片,然后把包装纸换成一幅幅canvas画布,按照每帧图片的尺寸,将它们剪下,依次贴在画布上,然后把画有单帧图片的画布们放入数组,这样就也得到一袋独立包装的 牛皮糖”了三当需要绘制某一帧图片时,找到对应的那块 牛皮糖”,对它进行操作就好了三
(2)滤镜三
很多时候,往往希望舞台上的动画各自呈现不同的滤镜效果,比如两条一样的鱼,希望小一点的那条鱼透明度高一点,而大一点的透明度低一点,这样看起来,那条小一点的就像是离得较远,大的那条离得近一样三所以相比简单地给整个画布添加某一个滤镜,给单个动画添加动画显得更明智一些,但是同样也麻烦一些三
这就相当于有人爱吃包着糖霜的牛皮糖,有人不喜欢三相比直接在牛皮糖制作时放入糖霜,让每一张牛皮糖都变得一模一样,师傅们只需要在卖给顾客时根据他们的要求,在把包装好的糖放入大包装时,将卖给要糖霜的顾客们的牛皮糖裹上糖霜就好三好在每一幅图片在初始化阶段的第一步已经变成了一袋独立包装的 牛皮糖 ,所以只需要在将 小鱼牌牛皮糖”放入大包装袋时,让它里面的每一颗糖都变透明一点就好三滤镜可以实现高斯模糊二色彩变换二透明度变换等功能,sprite类会根据入口参数中filterType来决定添加哪项滤镜效果三
(3)路径设置三
为了使动画动起来,更有生气,更形象,需要为它们设置路径三这里有三种基本的移动方式,sprite默认的运动方式是匀速直线运动三
根据入口参数的初始位置和终止位置,除以动画存在的时间,计算出两个方向上的平均速度三匀速直线运动可以满足基本的汽车二人物等大多数动画要求三Fish类重载了move函数,定义了另外一种路径设置方式三如果鱼在大海中直线前进,真实感很弱,所以为了体现鱼沉浮的状态,这里将鱼的路径设置为一个弧度较小的弧线三
以开始点和结束点间的距离作为圆弧半径,将开始点和结束点作为圆弧上两点,绘制一个60°圆弧作为fish的轨迹三将60°除以对象存在时间平均分为若干份,对象每秒滑过其中一份,据此利用几何原理计算出fish的运动速度三
Sun类同样重载了move函数三这里move函数模拟太阳一天中东升西落,采用半圆路径三
以开始点和结束点间的距离的一半作为圆弧半径,将开始点和结束点作为圆弧上两点,绘制一个180°圆弧 即半圆作为sun的轨迹三将180°除以对象存在时间平均分为若干份,对象每秒滑过其中一份,据
四7四
第12期 平淑文等:基于HTML5和JavaScript轻量型动画框架开发
此利用几何原理计算出sun 的运动速度三
用户还可以自行扩展该框架,重载move 函数,创建不同的路径设置函数三
(4)物理效果三
现实生活中,物理效果无所不在,十分复杂三但是动画中并不要求把所有的物理效果均展现出来三比如需要制作一个模拟小球自由落体或者平抛运动的动画课件,只需要考虑重力因素就可以了,因为空气和小球的摩擦系数很小,摩擦力完全可以忽略不计三所以,该动画框架中封装了一些最常用的物理效果,并未包罗万象三
该动画框架中包含的物理效果有平抛运动二摩擦力二反弹等常用的基本原理三
①平抛运动是最常用的物理效果,调用该物理效
果函数时,用户只需要给定水平速度和距离地面的高度两个参数即可三
根据物体距离底面高度h ,可以计算出物体落地时间为:t total =
2h
g
三设时间t 0时,物体的位置是(x 0,y 0),经过时间Δt ,
物体的水平位置很好计算,即Δt 四v +x 0,而垂直位置为:h -g Δt +t ()02
2=h -g 2Δt +2(h -y 0)?è???÷g
2
,根
据舞台设置的刷新时间间隔,设置Δt ,每次调用路径
设置函数时,刷新物体的位置三
自由落体运动是平抛运动的一种特殊情况,当v =
0时,平抛运动转换为自由落体运动,所以模拟自由落体效果时,不需要重新编写函数,调用平抛运动函数即可实现三
②虽然中学物理题中,常常会假定摩擦力忽略不计,但是现实生活中摩擦力很多时候并不能忽略不计,需要时时刻刻考虑摩擦力对物理效果的影响三不过好在模拟摩擦力并不麻烦,根据动摩擦力公式F =μT ,T 为物理作用在接触面上垂直于接触面的压力,而大多数情况物体都是水平放置的,所以F =μmg 三只需要在水平方向将物体的速度v 添加一个消减因子,-μgt (t 是作用时间)即可三需要注意的是考虑摩擦力的情况下,摩擦力的方向随着运动方向变化,永远同运动方向反向三
③经常会看到类似小钢珠或者网球之类的球体
自由落体掉在地面上反弹起来的动画,这类动画似乎因为反弹这一个小小的细节而变得非常生动,所以为了使得制作的动画更逼真二有灵动感,特别添加了反弹特效三反弹的原理很简单,物体打在另一个物体时,会在摩擦力的作用下,消减物体垂直于被作用物体表面方向的速度三如果被打物体是不规则形,那么作用力
方向和大小较难确定,而现实生活中也并不常常遇到,所以只考虑小球垂直于水平面二垂直于竖直面和两小球弹性碰撞三种情况三
调用该物理效果函数时,用户需要指定弹性消除因子的大小,这个因子会随着两个碰撞物体的材质不同而存在非常大的不同三比如把一个钢珠丢到一个木板上,钢珠一般会弹起来,但是如果把一个球状的糯米糍丢在一样的木板上,糯米糍是一定不会反弹起来的三这是因为糯米糍表面的摩擦因子非常大,导致它和木板碰撞时的弹性消除因子也非常大,它竖直方向速度瞬时间被消减至0三
假设某物体垂直与某水平板相撞,末速度为v ,消减因子为η,则该物体被反弹起来的垂直向上的初速度为-v (1-η)(参考系以竖直向下为正方向)三水平方向原理一样,只需要把y 轴换做x 轴即可三如果是两个小球弹性碰撞,则将y 轴换做小球运动方向即可三如果两小球完全弹性碰撞,那么η=0[7-8]三
(5)缓动二快进与关键帧三
设置好上面所有显示方法之后,还需要设置动画显示帧三
很多时候,希望每一帧显示的时间不一样长,比如一个开灯的动画中,开灯只是一瞬间的事情,希望灯亮前的黑暗状态和灯亮后的明亮状态长一些三这里利用关键帧来实现,将开灯动作的动画设置只显示一次或少数次,将动作前和动作后的动画设置多次,即可模拟这个动画三
在一个汽车下坡的动画中,汽车在坡顶的速度应该较慢,而在坡底的时间则应该较快,这里可以按照牛顿第二定律,设置汽车在坡顶的动画循环多次,而在坡底的动画循环次数少一些,就可以真实呈现这一物理情景三
制作动画过程中,用户也可以利用函数修改动画的缓动或快进效果,通过将某一帧的显示次数减少来模拟快进,而将某一帧的显示次数增加来模拟缓动,十分容易三
(6)绘制三
到此,已经做好了一切前期准备工作,接下来需要做的是将图片绘制到画布上三这里利用HTML5的canvas 标签,canvas 就像一个画册一样,每一个canvas 元素都有一个绘图上下文,相当于这本画册中的一页,
可以在canvas 绘图上下文上绘制任意图形三支持HT?ML5canvas 标签的浏览器支持多个绘图上下文,并且通过提供不同的API 提供绘制功能三下面简单介绍一下canvas 的基础用法:a.首先需要创建canvas 元素,规定canvas 的id二宽
度二高度等属性;
四
8四 计算机技术与发展 第23卷
b.然后通过id查找canvas元素,创建一个绘图上下文,相当于根据画册的名字找到画册,然后在里面插入一页空白画纸,以便待会儿可以开始画画;这一段需要利用JavaScript实现;
c.接下来就可以在定义好的绘图上下文中绘制任意图形三
canvas支持一系列函数,可以绘制直线二任意曲线二矩形二圆等,利用这些基本函数可以绘制任意想要的图形,还支持填充二渐变等;也支持绘制多种格式的图片;还可以裁剪图片,以绘制动画三
对象类的绘制利用drawImage函数实现,且支持关键帧绘制三用户只需要规定好每次动画循环显示的帧顺序和次数,draw函数会自动根据设置显示动画,而不是死板地按照多帧图片的顺序来播放动画,具有更高的灵活性[9-12]三
由上可知,对象类定义了三种动画运动方式,用户还可以根据自己的需求,定义其他的运动方式,这个动画框架具有很高的可扩展性三
2.2.3 工具类
工具类主要封装了滤镜函数具体算法,算法虽然复杂,但是这部分提供了非常简单的外部接口给用户使用三
2.3 特 点
该动画框架在普通动画框架的基础上,取其精华,去其糟粕,并适当添加了新的元素,更贴合现在的需求和最新的技术特点,使用更方便三它的特点如下: (1)时间轴:用户只需要在时间轴上创建一个一个的动画,规定好每个动画的出现时间二结束时间二起点终点,就可以制作一个最简单的动画; (2)预分割:在初始化舞台时,预分割所有多帧图片,将其分割成一帧一帧的,并添加所要求的滤镜效果,然后存入数组,使用时只需读取即可,不必再分割,可以大大提高绘制时间;
(3)滤镜效果:多个基本滤镜函数保证用户可以随心所欲地PS自己的动画,展现不一样的动画效果;
(4)物理效果:多种物理效果函数可以让用户随心所欲模拟真实场景,增加真实感;
(5)答卷式编程:对外用户接口是一个包含所有信息的数组,用户只需要按照数组中的对象的对象名填写自己的需求即可,例如初始时间二结束时间二开始位置二结束位置二滤镜效果二物理效果二移动方式等,即便是不熟悉JS语言的用户也可以很方便的编程三
3 基于HTML5和JavaScript的动画框架的实例应用
下面分功能展示几个简单的动画效果三3.1 运动轨迹展示
运动轨迹效果如图2所示,可以看到,太阳和两条小鱼分别按照设定好的移动方式运动
三
图2 运动轨迹效果
3.2 滤镜效果展示
图3展示了高斯模糊滤镜和透明滤镜效果,可以看到离得较近的那条鱼颜色深一些,而远处那条鱼要浅一些,这是因为它们的透明度不同三而且颜色深的那条鱼,在第一幅图中很清楚,但是在第二幅图中因为高斯模糊滤镜的作用变得模糊了
三
图3 滤镜效果展示
3.3 动画实例
利用这个框架,编写了一个模拟运输煤炭的动画,接口参数如下所示:
img1={
image:new Image(),
filterimage:new Array(),
starttime:1,
endtime:4000,
cutpositionX:0,
cutpositionY:0,
cutsizeX:200,
cutsizeY:186,
startX:100,
startY:450,
endX:600,
endY:400,
imagewidth:200,
imageheight:2232, drawpositionX:100,
四9四
第12期 平淑文等:基于HTML5和JavaScript轻量型动画框架开发
drawpositionY :450,showsizewidth :50,showsizeheight :46.5,frame :[0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,3,3,3,3,3],circle :-1,
direction :"endwise",filter :["boxblurfilter",true ,[0,0,0]],
type :"Sprite"};
img1.image.src ="back.jpg";
上面的代码创建了一个从1开始,持续到4000
的动画,模仿上面的代码,还可以创建别的动画三按照上述模式,创建了一个有关物流运输的动画,虽然实际编程时,不会真地创建一个时间轴,但是就像文章的中心线一样,时间轴贯穿整个动画,它将各个分动画串联成一个完整的二有意义的动画,为了更直观地展示物流动画中各分动画的关系,绘制了图4(实际编程不需要创建时间轴
)三
图4 物流动画在时间轴中的描述
这个动画完整地展示了运煤车从进入卸煤地点到出卸煤地点整个过程中有关进门,检测,称重,卸货,再称重,离开的全部过程,这里利用关键帧设置,使得汽车前进动画持续时间长,而在每一个检测处的停留时间短,动画效果流畅,制作过程简单三
4摇结束语
综上完成了一个动画框架该有的基本功能,并使
用该引擎制作了几个简单的小动画三该框架分层构建框架的底层程序,具有较强的重用性和可维护性三它具有高度的可扩展性,当用户所需的运动方式或者滤镜效果没有被定义时,用户只需要给出简单的计算公式,即可添加想要的结果三文中由于篇幅有限,部分程序代码没有给出三
参考文献:
[1] 王建民,郑子彬,麦章灿,等.一个交互自适应手机游戏引
擎的设计与实现[J].系统仿真学报,2009(10):3120-3122.
[2] 叶 绿.一个建立在JXTA 平台上的对等网络游戏框架的
设计[J].计算机工程与应用,2004,40(17):144-147.[3] 赵丽娟,朱全银,张 帅,等.基于J2ME 的移动网络游戏
设计与实现[J].计算机工程与设计,2010,31(12):2720-2725.
[4] 冯科融,王和兴.HTML5网页游戏分析[J].网络与通信,2012(24):71-72.
[5] 刘华星,杨 庚.HTML5-下一代Web 开发标准研究[J].
计算机技术与发展,2011,21(8):54-58.
[6] 宋 宇,谭 浩.游戏引擎开发技术简析[J].福建电脑,2007(8):31-32.[7] 成迟薏,石教英,徐迎庆,等.基于物理模型的窗帘运动实
时动画[J].软件学报,2000,11(9):1228-1236.
[8] 牛红攀,高 勇,侯忠明.图形引擎与物理引擎结合的研究
与实现[J].计算机仿真,2011,28(6):299-303.[9] Lubbers P,Albers B,Salim F.HTML5高级程序设计[M].北京:人民邮电出版社,2011.[10]Freeman E,Robson E.Head first HTML5programming[M].USA:O’Reilly Media,2011.
[11]Grady M.Functional programming using JavaScript and the
HTML5canvas element[J].Journal of computing sciences in
colleges,2010,26:97-105.[12]Fulton S,Fulton J.HTML5Canvas [M].USA:O’Reilly
Media,
2011.
(上接第4页)
[5] Fritz M H,Leinonen R,Cochrane G,et al.Efficient storage of
high throughput DNA sequencing data using reference-based compression[J].Genome research,2011,21(5):734-740.[6] 方小永,骆志刚.DNA 序列拼接的分布式并行处理[J].计算机工程与科学,2005,27(2):71-73.
[7] Grumbachand S,Tahi F.A new challenge for compression al?
gorithms:Genetic sequences [J ].Information processing &management,1994,30(6):875-886.
[8] Chen X,Li M,Ma B,et al.DNACompress:Fast and effective
DNA sequence compression [J ].Bioinformatics,2002,18
(12):1696-1698.
[9] Rajarajeswari P,Apparao A.DNABIT compress-genome com?pression algorithm[J].Bioinformation,2011,5(8):350-360.[10]Matsumoto T,Sadakane K,Imai H.Biological sequence com?
pression algorithms[J].Genome informatics series,2000,11:
43-52.
[11]纪 震,周家锐,姜 来,等.DNA 序列数据压缩技术综述[J].电子学报,2010(5):1113-1121.
[12]郑翠芳.几种常用无损数据压缩算法研究[J].计算机技术
与发展,2011,21(9):73-76.四01四 计算机技术与发展 第23卷
基于HTML5和JavaScript轻量型动画框架开发
作者：平淑文， 潘珏羽， 张学金， 杜晓荣， PING Shu-wen， PAN Jue-yu， ZHANG Xue-jin ， DU Xiao-rong
作者单位：中山大学 电力电子与控制技术研究所,广东 珠海,519082
刊名：
计算机技术与发展
英文刊名：Computer Technology and Development
年，卷(期)：2013(12)
本文链接：https://www.doczj.com/doc/e21187308.html,/Periodical_wjfz201312002.aspx
HTML5与Flash对比 最近网络上最热的话题之一就是“开放式Web技术HTML5”，从国外媒体到国内媒体均有大量报道。从大量的报道中，如果各位从Google搜索引擎中输入“HTML5 Flash”这2个关键字组合，将会有1百多万条相关的资讯，真是犹如狂风暴雨一般，而现在的IE8，Safari 4和FF 3.5 RC都或多或少的支持了一些HTML5的功能，这就让HTML5的话题讨论更加如火如荼。我们来总结一下其中的话题，基本上是以下几个类型（请原谅我均用问号结束以下的标题，因为我会在后面谈及我的看法）： HTML5让Flash可有可无？ HTML5会为Flash和Silverlight送终么？ HTML5将一统视频插件市场，取代Flash Video? HTML5将成为Flash杀手? HTML5或将让Flash过气？ HTML5将严重冲击RIA领域技术？ ...... 本人仅罗列出以上有代表性的话题，基本可以说与HTML5和Flash这两个词相关的话题80%以上都围绕上述展开，当然有人是正方，有人是反方。对于HTML5和Flash，我希望能够表述一下我的观点，在详细表述之前，先概括一下我的观点：观点一，我支持HTML5和Open Web技术 观点二，我不认为HTML5将取代现有的Flash，HTML5有很长的路要走 接下来，请让我从各个方面来详细阐述我的观点。 观点一，我支持HTML5与Open Web技术，并且我认为Adobe也会积极推进HTML5开放的标准化工作。Adobe公司是世界上最棒的图形图像多媒体与网络技术应用软件开发公司（原来是图形图像，收购了MM后，我加上了网络应用技术开发）之一，在过去的13年中，Flash从1.0到10.0，逐渐变成了当前互联网上最流行的RIA 技术，Web交互体验，音频，视频，游戏，广告，企业Rich UI等等，都能看到Flash的身影，同样，收购了Macromedia公司之后，Adobe也有一套完全遵循和引导Web标准化页面的开发工具，那就是 Dreamweaver，其中对于W3C的Web标准和CSS样式标准的支持可谓是推崇备至。我相信，HTML5在Web 技术向着开放和标准化领域的进化过程中将起到至关重要的作用，而这一点，我有理由相信，在Web应用开发领域的工具上，Adobe有理由仍然去继续扮演一个支持者的角色。当然，这个支持者的角色也决不仅仅是从开放和标准化的角度出发的，从创新，客户需求和未来的发展机遇上，Adobe都不会轻易拒绝HTML5，并且实际情况就是 Adobe是W3C标准和HTML5工作委员会的成员之一，并且已经参与了很多标准化的工作，比如 H.264,CSS,PostScript,HTML,SVG和PDF ISO32000等等。 请各位看清楚，Adobe支持HTML5，但是不代表Adobe就会放弃对于Flash的支持，Flash作为一个发展了13年的成熟技术，面临很多挑战的同时，也面临很
2015年山东省职业院校技能大赛（中职组） “动画片制作”赛项竞赛规程 一、赛项名称 动画片制作（中职组） 二、竞赛目的 通过竞赛，检验和展示我省中职学校动画类专业教学成果，展示学生动画相关岗位通用技术和综合职业能力，引领和促进中等职业学校动画设计、计算机应用等专业的教育教学创新，实践教学内容、手段和方法的改革，推动提升中职学校相关专业学生的职业技能和职业素养。 三、竞赛内容与时间 （一）竞赛内容 基于赛场软、硬件环境，按照赛题要求，完成二足角色模型的建立，运用赛题提供的场景，创作一段15秒的卡通风格的三维动画。具体需要完成的工作包括三维建模、UV整理、贴图绘制、材质设计、非角色动画与角色动画、灯光布臵、渲染、合成等。角色建模与二足角色动画作为三维动画中最核心的部分，旨在指导学生对三维动画核心技术的熟练掌握。 比赛分为赛前动画基础、动画创作两个模块，均为现场竞赛。 动画基础与动画创作模块基本要求如下。 1.动画基础模块 根据参考图中卡通角色的三视图，完成三维建模、UV整理、贴图绘制与材质表现。模型、贴图与材质的效果应尽可能接近参考图。 根据参考图绘制贴图、设臵材质。每个角色至少需绘制固有色贴图一张，贴图精度不低于1024×1024，保存为.bmp 或.tga 文件。 自行挑选合适的视角，以最高品质渲染三张分辨率为1600×1200 或1200×1600 的效果图，保存为.bmp文件。
2.动画创作模块 动画故事主角为“动画基础部分”中已完成的模型，参赛选手需对主角进行绑定。 动画故事配角由选手根据情节从赛题提供的模型中进行选择并进行动画。 场景模型与贴图已提供，参赛选手可自行选择场景中的任一（或若干）区域作为故事发生的地点，并自行布臵灯光及空气透视效果；参赛选手可根据需要对场景模型的结构或材质进行调整。 如情节需要，可对场景、角色与道具进行修改，也可创建其它模型；请自行调整角色、主角、配角、道具之间的大小比例；请自行设计分镜；角色动画需符合运动规律。设计动画剧情时应当充分发挥想象力，力求故事新颖有趣，结局在意料之外却又在情理之中；动画故事的重点应放在卷面给出的开场剧情之后，必须强调主角与配角之间的互动。 如赛题中包含“动画创作要求”，则参赛选手需以赛题中的指定技术完成“动画创作要求”中所指定的动画效果；可以根据画面效果与故事铺陈的需要自行决定添加其它各类动画和特效。 为动画片命名，并据此添加片头；无需片尾，片头中严禁出现姓名、学校或者其他体现个人信息的文字。 动画长度为15 秒（不包括简单的片头），分辨率为1280×720，帧速率为25fps；最后输出的文件应为.mov 格式，以最高品质的H.264 编码方式压缩。 3.动画创作要求 以提供文字为故事的开头部分（最终动画应包含此部分），在此基础上继续发展，形成完整的故事。 （二）竞赛时间 第一、二模块合并比赛时间5小时，具体时间分配由参赛选手自行确定。 四、竞赛方式 本赛项为个人赛。 大赛分为初赛和决赛两个阶段。初赛由各院校自行组织，选拔优秀选手参加大赛决赛。以地市为单位组队报名参赛，每市限报1队。每参赛代表队指派领队1名（可由指
10款让人惊叹的html5动画效果 这里介绍10款让人叹为观止的html5动画效果 1、15种html5+css3图片堆叠图片展示特效 这是一款html5和css3制作的图片堆叠图片展示特效，就像一幅扑克牌堆叠在一起，最开始只能看到一张，点击按钮后就会展开成几张，非常有意思。 2、html5 svg+css3制作图片边框运动动画效果
一款使用html5 svg技术制作的图片边框运动动画效果，鼠标移动到图片上时，便会有几条线绕着边框运动，共有4种不同的效果。建议使用Firefox或Chrome浏览器观看。 3、21种html5+css3鼠标悬停hover超链接导航条动画效果 利用css3 transition属性制作的21种不同的鼠标悬停效果。当鼠标hover或悬停在超链接上时，
会触发各种动画效果。每种动画效果都十分独特，可用于网站导航。 4、18种基于html5 svg和css3的神奇超链接动画效果 普通的超链接效果是鼠标放上去出现一条下划线，本插件异想天开的使用html5 svg和css3打造出18种很神奇的超链接动画效果。每种超链接动画效果都有它的独到之处。 5、html5+css3网格图片3d翻转Loading页面切换效果
这是一个图片html5和css3制作的3d翻转Loading页面切换效果。在页面上以网格的形式展示所有的页面缩略图，当点击了缩略图片后，图片进行3d翻转，然后加载相应的页面内容。 6、12种利用html5+css3打造的消息提示框效果 这是12种风格各异的弹出消息提示框效果，使用html5和css3 animation属性制作，有各种旋转、翻转、伸展特效。效果非常华丽。
实验二预置动画、进度动画、变形动画和序列帧动画 一、预置动画 预置动画可以实现一秒钟制作动画。预置动画分为进入动画、强调动画、退出动画。 在舞台中选中某对象，点击其旁边的预置动画按钮，可以分别设置其进入动画、强调动画、退出动画的效果。并可以在右侧属性面板中设置其“循环播放”等效果。 二、进度动画 进度动画是按照图形或文字的绘制或编辑的顺序来实现动态效果的，因此在绘制的过程中，应根据自己想要的动态效果控制绘制顺序。 例：自动绘制的手机 （1）绘制手机 （2）添加图形进度动画 （3）添加文字进度动画 三、变形动画 注：变形动画只支持用mugeda绘制的动画，不支持由外界导入的图片。 1、图形转变 （1）绘制图形。使用椭圆工具在舞台上画一个圆形，为了方便观察，将圆形的线条设置为红色。 （2）在时间轴第30帧位置单击鼠标右键，选择“插入变形动画”。 （3）在第30帧，选择“节点”工具，将圆形任意变形，也可以重新设置填充色。 （4）预览动画 （5）添加运动类型：选中时间线第一个关键帧，在属性面板里设置“运动”
的类型，例如“碰撞退出”。 （6）预览动画 2、文字变形动画 (1)绘制文字。使用文字工具在舞台上输入文字，为了方便观察，在属性面板将文字设置为纯色--红色、加粗字体。 (2)在时间轴第30帧位置单击鼠标右键，选择“插入变形动画”。 (3)在第30帧，选择“节点”工具，在属性面板将文字的字体、字号、填充色、字间距、透明度、滤镜等属性重新设置， (4)预览动画 (5)点击“添加新页面”按钮，创建第2页。重复上述步骤（1）-（4），但是将步骤（2）的“插入变形动画”改为“插入关键帧动画”，观察两者有何不同。 不同：插入关键帧动画时，利用工具箱的变形工具只能修改文字的大小、位置，旋转等属性，而文字本身的填充色等属性，面板中不出现，即无法修改。 四、序列帧动画 制作比较复杂的特效效果时，需要借助一些后期特效或视频编辑软件，通过它们将一些比较酷的动画或者特效导成序列帧的形式，导入到我们的作品中。 （1）点击工具箱的“素材库”，点击“共享组”下的“手机序列帧”。 （2）在右侧出现的图片中，按住ctrl键的同时选中多张图片。 （3）选中右下角的复选框，该步骤很关键。 （4）点击“添加”按钮。 （5）预览动画。
（动漫设计）实训室仪器设备清单及技术需求 序号设备名称单位数量技术指标描述（基本参数或配置及功能要求）备注 1 教师机台 1 CPUIntel 酷睿2四核 Q9400，相当于8路CPU平台／4GB DDRII 800 ECC.FB-DIMM／NVIDIA Quadro FX 570 PCI-E256M／500GB IDE 8M cache 7200rpm／4TB SATAII（500G*8块） RAID 5／Multibridge PRO2高标清采集卡带接口箱带数模转换功能／DVD-RW／2台22”液晶显示器／Premiere Pro字幕软件，／手绘板 技术要求：具有高清视频上下载、三维制作、视频合成等一机多用功能。工作站采用双路INTEL 肆核心处理器，集成64bit扩展内存技术。本机内置8个可热插拔盘位。采集卡采用专业1U可上机架采集接口箱，带数模转换功能，可以实现高清向标清下变换输出，支持不用换采集卡兼容苹果平台和PC平台，拥有高清 HD-SDI 、标清SD-SDI 以及广播级 YUV分量、复合、S-Video和 DV1394 等所有已知的音视频和数据接口，支持完整的各种高清格式和标清格式以及DV、HDV的剪辑和输出。接口箱带有HDMI接口，可以连接高清数字电视做预监回放。支持4通道AES/EBU数字音频输入输出。配有BMD HDLINK 高清预监转换器，可实现24寸高清监视器预监。可通过千兆网络Renderfarm实现网络集群渲染 2 集群渲染系 统 套 1 渲染节点，6台：CPU：双颗INTEL XEON 5410（64位双颗四核心）/内存：4GB DDRII667 ECC. FB SDRAM ( 2*2GB DIMMS)。/硬盘驱动器：500G SATA 7200rpm。/光盘驱动器：16X DVDROM 。/电源：500W 。 /机箱规格：1U。 支持操作系统：/Windows XP SP2 (预装)。 控制节点，1台： CPU Intel酷睿2四核 Q9400/内存：4GB DDRII800 ECC. FB SDRAM ( 2*2GB DIMMS)。/硬 盘驱动器：500G SATA 7200rpm。/光盘驱动器：16X DVDROM 。/电源：500W 。 /机箱规格：1U。 支持操作系统：/ Windows SvrStd 2003 1-4CPU(预装) 渲染存储，1台： SAS接口8盘位高清盘阵，阵列柜可装载8颗3.5寸SATAII硬盘（最大6TB素材容量），支 持热插拔。配置有两个3Gb Mini-SAS外部高速接口与系统内RAID控制器相连。RAID5模式下，可保证超过400MB/s 的数据传输率，足以处理多层HD无压缩、2K电影分辨率的高级后期应用。采用黑色亚克力面板,整体使用铝拉 丝外壳，配合超静音风扇技术。通过ROHS认证《电气、电子设备中限制使用某些有害物质指令》。RAID级别， RAID 0,1,5。RAID卡主机插槽 PCI-E 4x。/主盘箱外部接口，双通道 3Gb MiniSAS。/磁盘位置，3.5寸8 包括管理软件及安 装调试
摘要：如何在HTML5中，使用CSS3的目标伪类:target来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。 【CSDN编译】导读：有开发者表示，HTML5将给个人开发者带来更多机遇。下面的稿件详细描述了一个唯美的动画效果，它实现了在同一个页面中进行登录表单和注册表单的转换。这些效果，完全由HTML5和CSS3实现。文章后面附上了三种不同风格的显示转换效果、以及源码下载。既可为网页瘦身，又可实现漂亮的网页效果，快快收藏吧。 这篇稿件将描述如何在HTML5中，使用CSS3的目标伪类“:target”来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。此演示目的是向用户展示从登录表单点击标注有“Join us”的按钮链接到注册表单的动画效果。我们将在文章末尾附上本实例的源码下载地址。 点击右下方Join us按钮，登录表单隐藏，注册表单显现 请注意，此实例只用于演示目的，它只能在支持“:target”伪类的浏览器中正常显示出来。HTML部分 在HTML中定义有两个表单，其中一个表单已用CSS隐藏使之不可见。来看看代码：1