1. 研究目的与意义(文献综述包含参考文献)
一、开发背景 近年来随着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技术。
2. 研究的基本内容、问题解决措施及方案
本课题关于前端动画交互框架的设计与实现,它包括以下功能需求:
1.动画模块
1)动画效果包括渐入、渐出,弹跳,缩放,移动等等。使用css3等技术,实现不同页面组件元素的多种动画效果。
