velocity.js的使用

关于velocity的简介

学习以前先找到官网:http://velocityjs.org/

中文手册（教程）：http://www.mrfront.com/docs/velocity.js/ 

velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协做，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不只包含了 $.animate() 的所有功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特点功能。能够兼容i8 和android2.3.

它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation， 是 jQuery 和 CSS3 transition 的最佳组合，它支持全部现代浏览器，最低可兼容到 IE8 和 Android 2.3。

Velocity 目前已被数以千计的公司使用在本身的项目中，包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等，这里Libscore.com 统计了哪些站点正使用 velocity.js。

因此说:css3不兼容i8，在i8时打不开，而用velovity.js可兼容。

           jQuery是PC端的插件，对于移动端不太适用，有点卡顿，可是velocity适用于移动端和PC端       

           例velocity的基本用法和配置属性

            

           duration：表明动画的时长

           delay：表明动画的延时时间

序列动画的三种实现方式

           1、delay   缺点：须要手动维护delay和duration之间的关系

          2、经过complete    缺点：实现代码一层层的嵌套，可读性差

         

        3、经过定义一个seq动画序列,经过velocity RunSequence实现序列，这种方法是可推荐使用的

          

 vellocity的特性（特别适合动画序列的场景）

当鼠标移到上面时，左右摇摆的动画：首先绑定一个事件，选中元素，在velocity的参数中（callout,shake）

预约义动画的效果，在实际项目中能够直接用，很是方便

       

若是在预约义效果中找不到定义的动画效果，可以使用自定义来定义动画

                     

四个步骤：

　　定义变量（动画元素、事件变量）

　　自定义动画

　　动画序列

　　事件绑定

js插件的学习方法（官网大体了解、运行例子、熟悉细节）