velocity.js中文手册 velocity取代jQuery animate()的插件

目前最新已经出到了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/
案例下载