Web前端开发工程师常用的三种前端动画效果的实现方式是什么？

　　随着互联网的普及和技术的不断发展，web前端开发工程师在当今互联网行业中的重要地位，Web前端开发工程师作为一个专业技术岗位，需要掌握多种技术来构建现代化的网页和应用程序，今天八维职业学校和大家一起来看看Web前端开发工程师常用的三种前端动画效果的实现方式是什么？希望对想要学习和了解web前端开发工程师这个行业的同学有所帮助。

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