网页动画技术

最早 JS 通过 setTimeout() 或者 setInterval() 方法设置一个时间，来控制帧与帧之间的时间间隔。

然而，这两个方法是有弊端的：效果不够流畅且占用额外资源。

后来，有了一个 requestAnimationFrame()，让浏览器决定最优帧速率、选择绘制下一帧的最佳时机。

参考几种不同的方法，汇总了如下的几个动画效果的技术：

1. css3
2. svg
3. gif
4. Flash
5. canvas
6. js 动画

canvas、webGL 只能算是一种绘图方式。他们的动画也都是通过 JS 修改参数来实现的。

很显然，我们不能将动画效果随手加于网页元素之上，然后期盼它能提升转化率。那太傻了。就像设计的所有其他方面，使用哪种动画，何时使用，这都需要仔细考虑。

从动画的交互效果来分：

1. 等待动画
2. 界面元素动画
3. 讲故事的动画
4. 纯装饰的动画
5. 广告中的动画
6. ......

正确使用运动感，可以告诉用户他们完成了某些操作。他们成功地与界面进行了交互，引发了某些变化。不管哪种动画，优先要注意动画对网页的性能有多大的影响！！

现行兼容性方案

1) 页面增强动画建议使用CSS动画

2) 复杂动画交互建议使用RAF及setInterval 或setTimeout优雅降级处理

3) 推荐动画库Velocity.js、GreenSock:

　　1) Velocity.js是一款动画切换的jQuery插件，它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。Velocity.js只有7k的大小，它不仅包含了$.animate()的所有功能，并且还包含了颜色切换、转换(transform)、循环、缓动、CSS切换、Scroll功能，它是jQuery、 jQuery UI、CSS变换 在动画方面的最佳组合。

Velocity.js支持IE8+、Chrome、Firefox等浏览器，并支持Andriod以及IOS。

Velocity.js在内部实现中使用了jQuery的$.queue()方法，因此它比 jQuery的$.animate()、$.fade()、$.delay()方法更加流畅，其性能也高于CSS的animation属性。

　　2) GreenSock：GSAP v12平台

非常快的速度：性能是非常重要的，尤其是在移动设备上。GSAP不断优化，以保证互动项目的快速响应、高效率及平滑，你可以从这里查看动画效果测试。

异想天开的强劲：内置众多引擎的功能，如动画色彩、贝塞尔曲线、CSS样式属性、Flash滤镜、数组等等，定义不同的回调，可以通过帧或者秒定义运动。

兼容性：Flash，HTML5，jQuery，Canvas，CSS，新浏览器，旧浏览器，RequireJS，EaseIJS，移动设备等等-GSAP都可以很好的与他们兼容，你可以选择你熟悉的工具来使用。

Javascript，AS3/AS2：选择适合你的语言来完成动画。

轻量与可扩展性：模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。

没有依赖：GSAP没有基于第三方工具来构建（虽然它将jQuery作为选择器），因此能保证最短的加载时间与最大化性能。

高等序列：不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。

良好的技术支持：可以通过论坛反馈，会有专家和资深活跃用户回答问题。

任何对象都可以实现动画：是的，任何，不用预定义的属性，任何对象的任意数字属性都可以实现动画，如果这些属性（如颜色，滤镜，非数值属性等）需要处理，插件可以实现。如果没有，我们可以实现一个。

重写管理：GSAP帮助防止动画引擎的冲突以及高级选项的设置。

易于学习：文档、教程、 示例、学习指南、论坛，还有很多学习资源，非常地丰富。

许可证：除商业用途意外，GSAP完全免费。