聊聊JS动画库 Velocity.js的使用

在讲velocity指定动画选项前 我们先说一下velocity支持的值: px em rem % vm vh 或者 利用运算符 *=2 表示当前值的2倍 或者 /=2 等运算方式

下面一个一个分析下指定动画选项：

duration 持续时间

这个是代表动画的持续时间默认值为毫秒(ms) 你可以这样使用：

// 表示一秒内将透明度从1到0
$div.velocity({opacity:0},{duration:1000})

也可以这样使用:

// 效果相同
$div.velocity({opacity:0},1000)

velocity也自定了三种持续方式：slow（600ms) ,normal（400ms）,fast(200ms),可根据自己实际需求使用

easing 缓动方式

这个是代表着动画以何种方式进行变换：ease-in-out(逐加逐减),ease-in (先加速后匀速),dase-out (先匀速后减速)

也可以根据 三角函数缓动 "easeInOutSine" ，css贝塞尔曲线[0.17,0.67,0.83,0.67] 或者弹簧物理 [张力，摩擦力] 等值进行实现

delay 延迟执行

表示这个动画延迟多少时间执行 默认单位毫秒(ms)

// 五秒后执行此动画
delay：5000

loop 循环次数

表示这个动画需要的循环次数:

// 循环五次
loop:5
// 无限循环
loop:true 

begin和complete回调函数

这两个表示在动画开始前和动画结束后所执行的函数：

begin:function(){ somgthing... },complete:function(){ somgthing... }

其他功能：

velocity还有一些其他功能，这里就日后再说，比如：reverse(反转)，scrolling(滚动)，color(颜色)，transform(变换 包含scale缩放 rotate旋转 translation平移等)

结语

总之前端技术现在层出不穷，作为程序员的我们更应学习一些新的技术，既然热爱，就永无止境，