更多课程 选择中心

Web培训
美国上市教育机构

400-111-8989

Web培训

Web前端人员应该知道的3种前端动画效果的实现方式

  • 发布:Web前端培训
  • 来源:Web开发教程
  • 时间:2019-01-24 15:08

今天小编要跟大家分享的文章是关于Web前端人员应该知道的3种前端动画效果的实现方式。合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥。那么Web前端人员是否了解各种前端动画效果实现方式的异同,具体应用中又是如何实现的呢?下面就让我们一起来看一看吧~

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 插件使用,对于初学者很友好。

以上就是小编今天为大家分享的关于Web前端人员应该知道的3种前端动画效果的实现方式的文章,希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。想要了解更多Web相关知识记得关注达内Web前端培训官网。最后祝愿小伙伴们工作顺利成为一名优秀的Web前端工程师

来源:https://segmentfault.com/a/1190000000594926

【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:web开发教程之HTML DOM 方法
下一篇:Web前端工程师该如何处理前端异常问题?

教Web前端编写高质量JavaScript代码的技巧

Web前端人员应该知道的JavaScript常见BUG及修复方法

Web前端初学者必备学习秘诀!

Web前端工程师要知道的JS 常用正则表达式

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省