前端动画效果实现的简单比较

合适的动画不只更能吸引人们的眼球，也能让你的应用体验更为流畅，而将动画的效果作到极致，才能让用户感到使用你的应用是一种享受，而不是以为生硬和枯燥。本文旨在探讨各类前端动画效果实现方式的异同，具体应用中如何实现，以及实现的效果还得根据自身的状况进行考量。

Javscript 动画

由于没有其它可用的实现方式，最初的前端动画都是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 插件使用，对于初学者很友好，我我的会倾向于使用 tween.js，由于它只专一与动画的数值计算，不只仅只适用与 Dom 操做。