Velocity.js笔记
velocity.min 1.2.1
velocity.min 1.2.3
目前最新已经出到了1.5.0。至于修复或添加了什么可以到github看看
https://github.com/julianshapiro/velocity
本地下载：velocity_1.5.0.zip
Velocity.js语法跟jquery中使用animate()的语法一样，但仅兼容IE8以上浏览器包括IE8移动设备上支持Android 2.3，
特点是可以实现颜色渐变、transform、循环（loops）、控制加速度（easings）、支持SVG和滚动（scrolling）。
甚至比jquery自带的animate和CSS属性transitions好。
还有另一款动画库GSAP：TweenMax.js
velocity总体代码：
$element.velocity({
width: "500px",
property2: value2
}, {
/* 以下如果没有做特别设置的话都是默认属性 */
duration: 400, // 一系列动作在多少时间内完成
easing: "swing", //动画加速度
queue: "", //动画队列，要必须等某个动作执行完后才能执行某个动作。
begin: undefined, //动画执行前，执行此函数
progress: undefined,//动画执行进度
complete: undefined,//动画执行后，执行此函数
display: none, //动画执行完后，隐藏。配合opacity: 0使用就是淡入淡出效果
visibility: hidden,//动画执行完后，隐藏。配合opacity: 0使用就是淡入淡出效果
loop: true / 2, //循环次数，完成动作之后在按原来动作后退，算一次。
delay: 2000,//动作多少秒后开始执行
mobileHA: true
});
velocity语法也可以像jquery语法一样
$element.velocity({'width':'500'},5000, "swing",function() { alert("Hi")});
支持的单位有px, em, rem, %, deg，vw/vh 如果不写单位默认是px,
也支持运算累加例如：
$element.velocity({
top: 50, // 默认加px单位
left: "50%",
width: "+=5px", //原来宽度加上5
height: "*=2" // 原来高度乘以2
});
动画队列写法例如：
$("div")
.velocity({ width: 75 }, 1500) //先执行
.velocity({ height: 0 }, 1250); //之后执行
queue动画队列写法，例如：
如果动画中的queue属性一旦设置了值，动画就不会执行。
$("div")
.velocity({ translateX: 75 }, { queue: "a" }) //给动画queue命名 'a'
.velocity({ translateY: 75 }, { queue: "a" })
.velocity({ width: 50 }, { queue: "b" })
.velocity({ height: 0 }, { queue: "b" })
$("div").dequeue("a"); //需要dequeue调用才能执行a的动画，而且是按先后顺序执行的
加速度设置
$element.velocity({ width: 50 }, "easeInSine");
$element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]);
$element.velocity({ width: 50 }, [ 250, 15 ]);
$element.velocity({ width: 50 }, [ 8 ]);
速度效果具体查看http://easings.net/zh-cn
也可以单独的为某一个属性设置变化加速的效果。
//更强的一个功能就是在做异步动画的时候，能为指定一个属性设置加速效果，如
$element.velocity({
borderBottomWidth: [ "2px", "spring" ], // Uses "spring"
width: [ "100px", [ 250, 15 ] ], // Uses custom spring physics
height: "100px" // Defaults to easeInSine, the call's default easing
}, {
easing: "easeInSine" // Default easing
});
也可以自己自定义加速效果
p:百分比（十进制值）
opts：The options object passed into the triggering Velocity call（可选）
tweenDelta：动画开始到结束的差值（可选）
$.Velocity.Easings.myCustomEasing = function (p, opts, tweenDelta) {
return 0.5 - Math.cos( p * Math.PI ) / 2;
};
velocity内置速度效果：
ease [.25,.1,.25,1]
ease-in [.42,0,1,1]
ease-out [0,0,.58,1]
ease-in-out [.42,0,.58,1]
easeInSine [.47,0,.745,.715]
easeOutSine [.39,.575,.565,1]
easeInOutSine [.445,.05,.55,.95]
easeInQuad [.55,.085,.68,.53]
easeOutQuad [.25,.46,.45,.94]
easeInOutQuad [.455,.03,.515,.955]
easeInCubic [.55,.055,.675,.19]
easeOutCubic [.215,.61,.355,1]
easeInOutCubic [.645,.045,.355,1]
easeInQuart [.895,.03,.685,.22]
easeOutQuart [.165,.84,.44,1]
easeInOutQuart [.77,0,.175,1]
easeInQuint [.755,.05,.855,.06]
easeOutQuint [.23,1,.32,1]
easeInOutQuint [.86,0,.07,1]
easeInExpo [.95,.05,.795,.035]
easeOutExpo [.19,1,.22,1]
easeInOutExpo [1,0,0,1]
easeInCirc [.6,.04,.98,.335]
easeOutCirc [.075,.82,.165,1]
easeInOutCirc [.785,.135,.15,.86]
没有我们想要的弹簧效果，但是velocity有自己的速度插件：velocity.easeplus
效果图：http://yuichiroharai.github.io/easeplus-velocity/sample/
该插件官网：https://github.com/yuichiroharai/easeplus-velocity
easeplus-velocity-master
动画前执行
$element.velocity({
opacity: 0
}, {
/* 执行动画前 记录所有动画 节点 数量 */
begin: function(elements) { console.log(elements); }
});
动画结束后执行
$element.velocity({
opacity: 0
}, {
/*执行动画后 记录所有动画 节点 数量 */
complete: function(elements) { console.log(elements); }
});
强制统一设置执行时间
//类似jquery的动画全局属性 $.fx.interval
$.Velocity.mock = 10;
设置进度
$element.velocity({
opacity: 0,
tween: [ 10, 20 ] // 设置tweenValue数值10到20
}, {
duration: 100,
progress: function(elements, complete, remaining, start, tweenValue) {
elements //每一个关键帧的这个对象
console.log((complete * 100) + "%"); //这动画完成的进度过程0%-100%
console.log(remaining + "ms remaining!"); //这动画剩余多少时间完成100ms到0ms
console.log("The current tween value is " + tweenValue)//自定义动画进度数值由20开始逐渐 到10。
}
});
简写为：
$element.velocity({
tween: [ 0, 1000 ]
}, {
easing: "spring",
progress: function(elements, c, r, s, t) {
console.log("The current tween value is " + t)
}
});
推荐在移动设备开启true
$element.velocity(propertiesMap, { mobileHA: false });
循环次数
$element.velocity({ height: "10em" }, { loop: 2 });
$element.velocity({ height: "10em" }, { loop: true }); //无限循环
每个动画间隔时间delay
$element.velocity({
height: "+=10em"
}, {
loop: 4,
delay: 100
});
fadeIn and fadeOut
代替fadeOut()
$element.velocity({ opacity: 0 }, { display: “none” }); //淡出 文档流不存在
$element.velocity({ opacity: 0 }, { visibility: “hidden” }); //淡出 文档流存在
fadeIn()
$element.velocity({ opacity: 1 }, { display: “block” });
或者
$element
.velocity(“fadeIn”, { duration: 1500 })
.velocity(“fadeOut”, { delay: 500, duration: 1500 });
slideUp and slideDown
$element
.velocity("slideDown", { duration: 1500 })
.velocity("slideUp", { delay: 500, duration: 1500 });
scroll参数（效果只兼容IE10以上）
$element
.velocity("scroll", { duration: 1500, easing: "spring" });
//滚动条滚动到元素顶部
例如：
$(“#element3”).velocity(“scroll”, {
container: $(“#container”),
duration: 800,
delay: 500
});
//#container是可滚动的区域css要有position: relative;
#element3在#container内容中
取代stop()
stop() == .velocity(“stop”); //当前动作停止如果之前有动作过的仍然保留，后续有动作继续执行
stop(true) ==.velocity(“stop”, true); //所有动作停止如果之前有动作过的仍然保留，后续也不执行
stop(true,true)==velocity(‘finish’,true) //当前瞬间完成，后续不执行
.velocity(“finish”); //当前瞬间完成，后续动作继续 (还比jquery多了一个效果)
动画后退
.velocity(“reverse”);
translate位移
$element.velocity({
translateX: "200px", //X轴 位移
translateY: "200px" //Y轴
});
rotate旋转
$element.velocity({
rotateX: "200px", //X轴 位移
rotateY: "200px" //Y轴
rotateZ: "200px"
});
scale拉伸
$element.velocity({
scaleX:'2', //宽为原来2倍
scaleY:'2' //高为原来2倍
});
textShadowX, textShadowY, and textShadowBlur
$element.velocity({ textShadowBlur: "10px" });
.hook设置、获取2D,3D属性值 类似css()
$.Velocity.hook($('div'),"translateX","200px"); //设置
$.Velocity.hook($('div'),"translateY","200px"); //设置
alert( $.Velocity.hook($('div'), "translateX") ) //获取
支持函数传值
$element.velocity({
translateX: function(i, total) {
return i * 10;
}
});
颜色渐变
$('#ni').velocity({
color:'#eff716', //字体颜色渐变
backgroundColor:'#000', //背景颜色渐变
backgroundColorAlpha: 0.2,//背景颜色透明度渐变
colorRed: "50%", //红绿蓝三色中的红渐变，支持百分比渐变
colorGreen: "+=150",
colorBlue: "+=150",
colorAlpha: 0.3 //字体颜色透明度渐变
},4000);
背景图片定位
'background-position-x': ['-600px', '0px'] //0到-600px
回调
//对IE的兼容性不是很好
$.Velocity.animate($('#ni'), { opacity: 0.5 },3000)
.then(function(elements) { alert($(elements).attr('id')) }) //成功后执行
.catch(function(error) { console.log("Rejected."); }); //失败后执行
—————-高级应用————————–
$('.c').velocity({
translateX: function(index, num) { //除了直接设置值，还能添加方法，(索引,总数)类似$.each
console.log(total);
return (i * 20);
}
});
效果是批量对class为.c的元素设置translateX值。
其他属性也可以这么写，要举一反三。
——————-扩展组件———————–
velocity.ui.js 扩展组件 （兼容IE8以上）
有时候通过回调要完成一系列的动作例如
$element1.velocity({ translateX: 100 }, 1000, function() {
$element2.velocity({ translateX: 200 }, 1000, function() {
$element3.velocity({ translateX: 300 }, 1000);
});
});
引入velocity.ui.js组件，可以将代码写成：
var mySequence = [
{ e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
{ e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },
{ e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];
$.Velocity.RunSequence(mySequence); //执行以上动作
如果在以上众多动作做中某一个动作不需要回调等待，而是开始时候就执行可以加上
{ e: $element2, p: { translateX: 200 }, o: { duration: 1000, sequenceQueue: false },
//不需要等上一个动作，而是直接可以加载页面的时候就开始执行
velocity.ui.js组件还为我们提供了跟animate.css类似的功能。
$('.c').velocity('transition.slideUpIn',
{ stagger: 2000,backwards: true,drag: true}//2秒回调一个效果，向后效果，动画紧凑
)
.delay(3150) //3.15秒后执行下一步
.velocity({ opacity: 0 }, 750);
案例：http://www.smashingmagazine.com/2014/06/18/faster-ui-animations-with-velocity-js/
更多效果预览：http://julian.com/research/velocity/#uiPack
如果内置的动画没有你想要的还可以自定义动画
$.Velocity.RegisterUI("callout.zidingyi", {
defaultDuration: 3000, //默认过渡时间
calls: [
[ { rotateZ: 1080 }, 0.50 ],
[ { scaleX: 0.5 }, 0.25, { easing: "spring" } ],
[ { scaleX: 1 }, 0.25, { easing: "spring" } ]
]
});
$('.c').velocity('callout.zidingyi'); //调用
更多内容还需要上http://julian.com/research/velocity/
http://velocityjs.org/
案例下载
