velocity-animate(js动画库)

velocity-animate

使用方式:
dom.velocity({params1},{params})
1.注意使用的是dom对象
2.支持链式调用,dom.velocity({…}).velocity({…})
3.

params1:改变后的属性值，如width,height,opacity等等
注意写法:驼峰式
1.transform写法注意
	$element.velocity({
	    translateX: "200px",
	    rotateZ: "45deg"
	});
2.color写法注意:
	$element.velocity({
	    backgroundColor: "#ff0000",
	    backgroundColorAlpha: 0.5,
	    colorRed: "50%",
	    colorBlue: "+=50",
	    colorAlpha: 0.85
	});
...

params2:原值转变为params1设定的值的过度效果
1.duration 动画的持续时间 
	单位ms,也可以设置为slow(600ms), normal(400ms), fast(200ms)
2. easing 缓动方式
3.  delay 延迟执行(ms)
4.  loop 循环次数(true无限循环)
5. 回调函数
	begin: function () {...} // 动画开始时的回调函数
    progress: function () {...} // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
    complete: function () {...} // 动画结束时的回调函数
    Progress: function (elements, c, r, s, t) {...} //动画持续过程中不断触发的回调函数
    	 complete  完成进度百分比 十进制表示
    	 remaining 剩余时间(ms)
    	 start 现在距离动画开始的时间(ms)
    	  tweenValue 虚拟渐变动画属性当前值(需要进一步研究)
    display动画结束时设置元素的 css display 属性
    visibility动画结束时设置元素的 css visibility 属性
    mobileHA // 移动端硬件加速（默认开启 - true）
    queue// 队列

velocity还提供了一些便捷的动画指令供我们使用(很类似jquery)
1.淡入淡出fadeIn and fadeOut  dom.velocity("fadeIn", { delay: 500, duration: 1500 })
2.滑入滑出slideUp and slideDown   dom.velocity("slideUp", { delay: 500, duration: 1500 })
3.滚动到元素顶部scroll      dom.velocity("scroll", { duration: 1500, easing: "spring" })
4.停止所有动画stop  dom.velocity("stop")
5.完成当前动画finish  dom.velocity("finish")
6.反转,回到初始reverse  dom.velocity("reverse")

gihub地址:https://github.com/julianshapiro/velocity
官网地址:http://velocityjs.org/#bugs