Velocity.js

Velocity.js语法跟jquery中使用animate()的语法一样，但仅兼容IE8以上浏览器包括IE8移动设备上支持Android 2.3，
特点是可以实现颜色渐变、transform、循环（loops）、控制加速度（easings）、支持SVG和滚动（scrolling）。
甚至比jquery自带的animate和CSS属性transitions好。


velocity总体代码：


$element.velocity({ 
    width: "500px",
    property2: value2
}, {
    /* 以下如果没有做特别设置的话都是默认属性 */
    duration: 400,
    easing: "swing",
    queue: "",
    begin: undefined,
    progress: undefined,
    complete: undefined,
    display: undefined,
    visibility: undefined,
    loop: false,
    delay: false,
    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;
};




动画前执行
$element.velocity({
    opacity: 0
}, { 
    /* 执行动画前 记录所有动画 节点 数量 */
    begin: function(elements) { console.log(elements); }
});




动画结束后执行
$element.velocity({
    opacity: 0
}, { 
    /*执行动画后 记录所有动画 节点 数量 */
    complete: function(elements) { console.log(elements); }
});






设置进度
$element.velocity({
    opacity: 0,
    tween: 1000 // 数值
}, {
    progress: function(elements, complete, remaining, start, tweenValue) {
        console.log((complete * 100) + "%");
        console.log(remaining + "ms remaining!");
        console.log("The current tween value is " + tweenValue)
    }
});

简写为：

$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,true) == .velocity("finish");




动画后退
.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" });




设置、获取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;
    }
});



更多内容还需要上http://julian.com/research/velocity/