15037120869
北京web前端培训学校怎么收费,web前端学习培训就来北京中公优,中公优是一家集网络营销经理、互联网产品经理、网页设计师、Web前端工程师、PHP工程师、Android工程师、IOS工程师、Java工程师、C/C++工程师等课程为一体的专业培训机构。致力于培养面向互联网领域的人才,以学员就业为目的,优质就业为宗旨的服务理念保障每位学院的学习效果。
Web前端人员应该知道的3种前端动画效果的实现方式
一、JavaScript动画
因为没有其它可用的实现方式,较初的前端动画都是JS来实现,实现上就是通过一个定时器setInterval每隔一定时间来改变元素的样式,动画结束时clearInterval即可。早期的类库包括jquery、prototype、mootools等等都是这种方式。
尽管这种方式动画的可控性很强,但是问题也很明显:
·性能不佳,因为需要不断获取和修改Dom的布局,所以导致了大量页面重排(repaint)
·缺乏标准,不同的库使用了不同的API,导致即使是简单的动画也有各不相同的实现方式,调整起来比较耗时
·带宽消耗,相对丰富的动画库代码量都很大,结果就是增加了http请求的大小,降低了页面的载入时间
二、CSS3动画
css3加了两种动画的实现方式,一种是transition,一种是animation。
transition包含4种属性:transition-delay transition-duration transition-property transition-timing-function,对应动画的4种属性:延迟、持续时间、对应css属性和缓动函数,
transform包含7种属性:animation-name animation-duration animation-timing-function animation-delay animation-direction animation-iteration-count animation-fill-mode animation-play-state,它们可以定义动画名称,持续时间,缓动函数,动画延迟,动画方向,重复次数,填充模式。
总的来书,css动画相比与JS更轻量,性能更好,更易于实现,同时也不必担心缺乏标准和增加带宽消耗的问题。animation相比transtion使用起来更为复杂,但也提供了更多的控制,其中较重要的就是frame的支持,不过通过一些简单的JS库,例如TJ的move.js,我们也能在JS中通过transition来实现更复杂的控制。
三、Html5动画
Html5定义了三种绘图的方式,canvas svg Webgl,其中svg做为一种可缩放矢量图形的实现是基于xml标签定义的,它有专门的animate标签来定义动画。而为canvas或者Webgl实现动画则需要通过requestAnimationFrame(简称raf)来定期刷新画布。尽管说raf的方式会让代码变得复杂,但是因为不需要那么多的文档对象(通常浏览器只需要管理一个画布),它的性能也好很多,尤其是在内存吃紧的移动端上面。
通过新的raf接口以及一些改进手段我们也可以用JS来实现高性能的动画。主要手段如下:
1.减少Dom样式属性查询,Dom样式属性的查询会导致页面重排,从而消耗性能,通过将属性保存在JS变量中就可以避免在动画时去查询,从而减少卡顿。
2.使用性能更好的css transform替代改变定位元素的定位属性
3.在移动设备上使用3d硬件加速,较简单办法就是添加-Webkit-transform:translateZ(0),原因是移动端的显卡有很强的图形渲染能力,而每个应用的WebvieW内存却是极其有限的。
使用JS的动画可控性更好,比如说通过事件捕捉可以很容易的设定不同参数。这方面做的较全面的有Velocity.js,它可做为jquery插件使用,对于初学者很友好。