基于HTML5、CSS3与jQuery的前端交互动画框架文献综述

 2021-09-25 08:09

毕业论文课题相关文献综述

一、开发背景 近年来随着Web应用交互复杂度的提升,前端开发也迎来了一个高速发展的时期。除了一些老牌框架纷纷推出改动较大的升级之外,还涌现出一批新生代的开源库和框架,推动着Web应用开发理念向越来越强调前端架构的方向发展。当下的前端技术可以说是处在一个新旧交替的过程之中,同时存在着许多不同的观念和实践。 如今,前端框架不仅发展迅速,而且种类繁多,规模、侧重各异。有传统型框架如YUI、Dojo、ExtJS等。这一类如大教堂般的框架通常稳定,文档丰富而详细,会持续更新;试图解决尽可能多的问题;代码风格和质量一致,也经常会要求使用者遵循一定的风格规范;不过这类框架依赖性很强一旦选择很难替换。还有前端的CSS框架如Bootstrap、Foundation、Semantic UI等,是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块,通常支持响应式,用于简化web前端开发的工作,是使用者可简单的通过搭建正确的页面结构和添加样式类写出设计简洁美观、易于维护的页面,大大提高工作效率。还有单页应用型框架代表性的如AngularJS、Backbone.js、Ember.js、Knockout.js等。单页应用的优势是服务器请求数少、UI反应快速、用户体验流畅。对于交互复杂的大型应用,尤其需要有一个为单页应用量身打造的前端架构来支撑。这些架构架构采用MVC模式、MVP模式或是MVVM模式,便于快速搭建单页应用。 对于网站和互联网的产品而言,前端用户体验往往决定了一款产品的竞争力和吸引力;而对于前端工程师来说,考虑的问题更为复杂,他们既要为网站上提供的产品和服务实现一流的Web页面、优化代码,保证体验的最佳,更要考虑与市面上各大浏览器的兼容性,还需顾及Web前端表现层和前后端交互的架构,以及模块化、通用类库、框架编写等一系列问题,由此提升前端开发的效率,降低开发成本和周期。前端框架的快速发展大大的方便了使用者,是Web的开发更加便捷、美观、多平台、易于维护。

二、开发目的 随着换互联网的发展,Web的使用愈发广泛,作用愈发强大,随着近年来移动设备和可穿戴设备的快速发展,Web App开始流行,功能也日趋完善。对Web前端的需求就越发的强烈。前端就是利用HTML CSS JavaScript来向用户展示界面的东西,按照最初万维网设计的初衷,开发人员只需把HTML写好,展示出内容就行了;而如今,web不仅仅要展示出内容,还要有视觉设计师的参与,即写需要样式(CSS),在用户体验(User Experience)如此重要的今天,交互设计也愈发被人们重视,用户交互(JavaScript)也成为Web前端开发的点睛之笔。前端开发的内容越来越多,对前端开发人员的要求就越来越高,前端开发对非专业人士的难度也越大。这时前端框架就可以极大地提高前端开发的效率,降低前端开发的难度,让使用者只需要用HTML编写页面的框架,然后按照前端框架的规范给页面添加页面元素,再通过添加样式类给组件添加相应的样式和交互。前端框架实质就是一套各种页面元素(例如表格、按钮、段落)的CSS样式,再加上JavaScript用于用户交互。 随着前端技术以及浏览器的发展,页面可以有更好的渲染,然而想做出好的页面动画以及交互效果并不那么简单,。前端动画交互框架,将主要利用CSS3技术辅助HTML5技术、jQuery以及其他一些技术实现页面元素的动画和组件的交互,让使用者可以简单便捷的做出动画和交互效果。并且考虑到页面加载的速度、不同分辨率多终端的适配、参数用户可自定义、框架模块化轻耦合、适配多种框架设计风格。

三、开发技术 在本框架中,我将主要使用HTML5,是HTML、XHTML 以及 HTML DOM 的新标准,HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了大部分HTML5支持;CSS3,CSS技术的升级版本,W3C 仍然在对 CSS3 规范进行开发,不过,现代浏览器已经实现了相当多的 CSS3 属性;jQuery,一个JavaScript库,极大地简化了 JavaScript开发,功能全面、高效便捷;以及其他一些好用的现代Web技术。

1.基于jQuery开发 jQuery非常轻巧,拥有强大的选择器,出色的DOM操作的封装,可靠的事件处理机制,出色的浏览器兼容性,丰富的插件支持,完善的文档并且开源。使得基于jQuery开发,可以快速、便捷的进行JavaScript的开发,并使得框架可以兼容绝大部分的jQuery插件,便于使用者增加自定义内容。

2.基于CSS3的动画 通过CSS3,我们能够创建动画,这可以在网页中取代动画图片、Flash 动画及 JavaScript。动画图片制作成本高,一般需要专门的设计师进行设计制作,体积小的动画图片,效果差,效果好的动画图片,体积大、加载速度慢,不便于网站的维护。Flash动画兼容性差,移动设备尤其是苹果设备支持差,性能占用大。JavaScript动画制作难度大,性能不佳; CSS3动画性能好,浏览器会专门进行渲染优化。所以这里使用CSS3动画。用户只要为想添加动画的页面元素添加相应的类,就可以轻松地实现元素动画了。

3.HTML5下一代Web开发技术 HTML5的特点就两个:第一、跨平台,第二、开发简单。HTML5使得技术门槛更低、应用可跨平台运行,开发一次就可覆盖不同的系统平台和不同形态的终端、有效解决终端适配难题、更加智能的语义描述(便于搜索)等,潜在开发者众多;海量的互联网内容可以快速转换成各种终端应用;无疑,HTML5的出现将大大提高应用生产力。对于开发者而言,只要掌握一种开发语言、环境,开发出来的应用就能覆盖不同的操作系统平台和不同形态的终端,再好不过了。 技术优势只是新技术成功的基础之一。新技术从提出到标准化、产品化、产业化,是漫漫长路,需要做很多的努力。 W3C牵头制定HTML5国际标准,原计划是2017年发布,现在已经提前到2014年,目前已经进入last call阶段,我估计HTML5标准的发布还得提前。WAC制定的移动微技(Mobile Widget)标准,将对HTML5技术的支持作为基础条件。 产品化是形成新的产业的基础。难得看到多家巨头遵循同一个标准,研发各种产品,推进新的产业形成。简单介绍其中几家公司在HTML5产品化方面做的一些工作。

4.交互设计理念 好的动画交互不仅仅是代码的实现,交互的设计也是至关重要的,设计理念用更加直观且更吸引人的方式展现出来。同时设计巧妙的动画够能提升产品体验,增加趣味性,在给用户带来惊喜的同时为产品目标服务,激发用户探索的兴趣,让用户产生成就感,提供超出用户预期的愉悦体验。本框架会参考好的交互设计例如Material Design的设计原则,将本框架的交互设计设计成为跨平台的,用户体验好的设计。

5.渐进增强,平稳退化,移动优先 虽然移动端不是本框架的实现重点,但是在Web App和响应式的流行,移动端日益成为了人们上网的主力军。移动端的动画交互会主要由HTML5的TOUCH事件来监听。图片、布局等会主要以响应式的原理来实现移动端的内容显示。 渐进增强简单的来说就是不要为了兼容舍弃新技术。在跨终端的时代,渐进增强和平稳退化依旧是最重要的前端开发思想,但前端工程师们不能像以前一样仅仅固守在Web上,Web和客户端应用的融合已经成为必然。这是一个巨大的挑战,也是一个前所未有的机会,更是时势的要求。参考文献 [1] 大漠.图解CSS3:核心技术与案例实战[M].机械工业出版社,2014[2] Ben Frain.响应式Web设计:HTML5和CSS3实战[M].王永强(译).人民邮电出版社,2013[3] Brian P.Hogan, Chris Warren, Mike Weber, Chris Johnson. Web开发秘方[M].七印部落(译). 华中科技大学出版社,2013[4] 单东林,张晓菲,魏然.锋利的jQuery[M].人民邮电出版社,2012[5] Nicholas C.Zakas.JavaScript高级程序设计[M].李松峰,曹力(译) .人民邮电出版社,2012[6] Dave Shea,Molly E.Holzschlag.CSS禅意花园(修订版)[M].陈黎夫,山崺颋 (译). 人民邮电出版社,2012[7] 曹刘阳.编写高质量代码:Web前端开发修炼之道[M].机械工业出版社,2010[8] Nicholas C. Zakas.编写可维护的JavaScript[M].李晶,郭凯,张散集(译). 人民邮电出版社,2013[9] Michael Bowers,Dionysios Synodinos,Victor Sumner.HTML5与CSS3设计模式[M].曾少宁(译).人民邮电出版社,2013[10]Douglas Crockford.JavaScript语言精粹[M].赵泽欣(译).电子工业出版社,2012[11]Yamoo.HTML5 CSS3 jQuery应用之美[M].武传海(译).人民邮电出版社,2013[12]谢郁.CSS高效开发实战[M].电子工业出版社,2014[13]Charles Wyke-Smith.CSS设计指南(第3版)[M].李松峰(译).人民邮电出版社,2013[14]德国Smashing杂志.众妙之门:精通CSS3[M].李景媛,吴晓嘉(译).人民邮电出版社,2013[15]Jonathan Chaffer,Karl Swedberg.jQuery基础教程(第4版)[M].李松峰(译). 人民邮电出版社,2013[16]Dudley Storey.Pro CSS3 Animation[M].APress, 2013

剩余内容已隐藏,您需要先支付 10元 才能查看该篇文章全部内容!立即支付

以上是毕业论文文献综述,课题毕业论文、任务书、外文翻译、程序设计、图纸设计等资料可联系客服协助查找。