Velocity.js的使用

時間 2019-11-10

標籤 velocity.js velocity 使用欄目 JavaScript 简体版

原文原文鏈接

前面的話

　　Velocity是一款優秀的JS動畫庫，徹底能夠做爲jQuery的animate的替代品。須要動畫功能時，使用Velocity是一個好選擇。本文將詳細介紹Velocity.js的使用css

概述

　　Velocity是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它和jQuery的animate()有相同的API，但它不依賴 jQuery，可單獨使用。Velocity不只包含了$.animate()的所有功能，還擁有：顏色動畫、轉換動畫(transforms)、循環、緩動、SVG動畫和滾動動畫等特點功能。它比$.animate()更快更流暢，性能甚至高於CSS3 animation，是jQuery和CSS3 transition的最佳組合，它支持全部現代瀏覽器，最低可兼容到IE8和Android 2.3html

【下載】jquery

　　能夠經過官網直接下載Velocity.js，下載地址git

　　也可使用npm安裝github

npm install velocity-animate

基本用法

　　當使用jQuery時，Velocity和jQuery的animate()用法相似spring

$("#test").velocity({
    left: "200px"
}, {
    duration: 450,
    delay: 300
});

　　不使用jQuery時，寫法以下npm

  var oBox = document.getElementById('test');
  Velocity(oBox,{
      left: "200px"
  }, {
      duration: 450,
      delay: 300
  });

　　下面是一個實例api

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
reset.onclick = function(){history.go();}
btn.onclick = function(){
  var oBox = document.getElementById('test');
  Velocity(oBox,{
      left: "200px"
  }, {
      duration: 450,
      delay: 300
  }); 
}
</script>

參數設置

　　Velocity 接收一組 css 屬性鍵值對 (css map) 做爲它的第一個參數，該參數做爲動畫效果的最終屬性。第二個參數是可選參數爲動畫的額外配置項。下面爲參數的寫法：數組

$element.velocity({
    width: "500px",        // 動畫屬性 寬度到 "500px" 的動畫
    property2: value2      // 屬性示例
}, {
    /* Velocity 動畫配置項的默認值 */
    duration: 400,         // 動畫執行時間
    easing: "swing",       // 緩動效果
    queue: "",             // 隊列
    begin: undefined,      // 動畫開始時的回調函數
    progress: undefined,   // 動畫執行中的回調函數（該函數會隨着動畫執行被不斷觸發）
    complete: undefined,   // 動畫結束時的回調函數
    display: undefined,    // 動畫結束時設置元素的 css display 屬性
    visibility: undefined, // 動畫結束時設置元素的 css visibility 屬性
    loop: false,           // 循環
    delay: false,          // 延遲
    mobileHA: true         // 移動端硬件加速（默認開啓）
});

【單一對象參數寫法】promise

　　Velocity 也支持 single-argument 的語法

$element.velocity({
    properties: { opacity: 1 },
    options: { duration: 500 }
});

// 或者：
$element.velocity({
    p: { opacity: 1 }, // 能夠將 properties 簡寫成 p
    o: { duration: 500 }
});

【逗號分割的參數寫法】

$element.velocity({ top: 50 }, 1000);
$element.velocity({ top: 50 }, 1000, "swing");
$element.velocity({ top: 50 }, "swing");
$element.velocity({ top: 50 }, 1000, function() { alert("Hi"); });

【單位】

　　若是不寫屬性值的單位, Velocity 會將像素(px)做爲默認單位

// 等同 padding: 1px
$element.velocity({ padding: 1 });

// 等同 padding-left: 1px, padding-right: 1px
$element.velocity({
    paddingLeft: 1,
    paddingRight: 1
});

// 不能這樣寫！由於這樣至關於爲 padding 賦了多個值
$element.velocity({ padding: "1 1 1 1" }); // error

　　Velocity 在 1.2.0+ 版本里增長了對 "px, em, rem, %, deg, vw/vh" 這些單位的支持。若是不填寫屬性單位，默認單位仍是"px"，但 "deg" 用於 rotateZ 屬性時能夠省略不寫

【計算屬性】

　　Velocity 還支持動態計算屬性值，包括 "+, -, *, /"，還能夠設置元素在動畫執行前的初始值

　　[注意]"rem" 只支持 IE9+，"vh/vw" 只支持 IE9+ 和 Android 4.4+

$element.velocity({
    top: 50,                // 等同於 "50px"
    left: "50%",
    width: "+=5rem",        // 每次在當前值上疊加 5rem
    height: "*=2"           // 每次在當前值上疊乘 2
    color: ["#888", "#000"] // 每次動畫執行前，color 的初始值都爲"#000"（從"#000"過渡成"#888"）
});

【鏈式動畫】

　　當一個元素連續應用多個velocity()時，動畫將以隊列的方式執行

$element
    /* 先執行寬度變爲75px的動畫 */
    .velocity({ width: 75 })
    /* 等前面的寬度動畫結束後，再執行高度變爲0的動畫 */
    .velocity({ height: 0 });

　　下面是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:150px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
reset.onclick = function(){history.go();}
btn.onclick = function(){
  $('#test').velocity({left:200}, {duration:500,complete:function(el){
    el[0].style.backgroundColor = 'lightblue';
    el[0].innerHTML = '小火柴的藍色理想';
  }}).velocity({width:300})
}
</script>

配置項

　　Velocity 提供了豐富的可選配置項，能夠更好的控制動畫，也能夠利用這些配置作出炫酷複雜的動畫特效

【執行時間】

　　Velocity 的動畫執行時間以毫秒爲單位，並支持 jQuery 中的動畫速度關鍵字: "slow","normal","fast"

$element.velocity({ opacity: 1 }, { duration: 1000 });

// 支持 jQuery 中的動畫速度關鍵字：
$element.velocity({ opacity: 1 }, { duration: "slow" });

【easing緩動效果】

　　Velocity默認包含5種緩動效果

　　一、jQuery UI的緩動關鍵字

"linear"
"swing"
"spring"
"easeInSine"
"easeOutSine"
"easeInOutSine"
"easeInQuad"
"easeOutQuad"
"easeInOutQuad"
"easeInCubic"
"easeOutCubic"
"easeInOutCubic"
"easeInQuart"
"easeOutQuart"
"easeInOutQuart"
"easeInQuint"
"easeOutQuint"
"easeInOutQuint"
"easeInExpo"
"easeOutExpo"
"easeInOutExpo"
"easeInCirc"
"easeOutCirc"
"easeInOutCirc"

　　二、CSS3緩動關鍵字

"ease"
"ease-in"
"ease-out"
"ease-in-out"

　　三、CSS3 貝塞爾曲線

[ 0.17, 0.67, 0.83, 0.67 ]

　　四、彈簧物理緩動（spring physics）

　　以2位數組的形式 [ tension, friction ]，tension最大值爲500，friction 最大值爲20

　　五、步驟緩動（step easings）

　　以1位數組的形式使動畫經過指定的步驟過渡到結束值

/* 標準寫法 */
$element.velocity({ width: 50 }, { easing: "easeInSine" });

/* 或 */
$element.velocity({ width: 50 }, "easeInSine");

/* jQuery UI easings */
$element.velocity({ width: 50 }, "easeInSine");

/* CSS3 easings */
$element.velocity({ width: 50 }, "ease-in");

/* 貝塞爾曲線 */
$element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]);

/* 彈簧物理 */
$element.velocity({ width: 50 }, [ 250, 15 ]);

/* step easing */
$element.velocity({ width: 50 }, [ 8 ]);

　　緩動可應用於單個屬性

$element.velocity({
    borderBottomWidth: [ "2px", "spring" ], // border-bottom 使用 "spring"
    width: [ "100px", [ 250, 15 ] ],        // width 使用 spring physics
    height: "100px"
}, {
    easing: "easeInSine" // 默認全部屬性使用 "easeInSine"
});

　　能夠經過函數的形式註冊自定義的緩動效果，函數將被擴展到$.Velocity.Easings對象上

// p：動畫完成的百分比（十進制值）
// opts：傳遞到觸發 .velocity() 調用的選項
// tweenDelta：補間
$.Velocity.Easings.myCustomEasing = function (p, opts, tweenDelta) {
    return 0.5 - Math.cos( p * Math.PI ) / 2;
};

【動畫隊列】

　　能夠經過設置queue: false 強制並行執行一個新動畫

// 執行寬度變爲"50px"的動畫
$element.velocity({ width: "120px" }, { duration: 3000 });

setTimeout(function() {
    /* 1.5秒後 開始並行執行高度變爲"50px"的新動畫 */
    $element.velocity({ height: "120px" }, { duration: 1500, queue: false });
}, 1500);

　　下面是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  // 執行寬度變爲"50px"的動畫
  $("#test").velocity({ width: "200px" }, { duration: 3000 });  
  setTimeout(function() {
    /* 1.5秒後 開始並行執行高度變爲"50px"的新動畫 */
    $("#test").velocity({ height: "200px" }, { duration: 1500, queue: false });
  }, 1500);  
})
</script>

　　也能夠自定義動畫隊列，但不會當即執行，須要經過dequeue()方法手動執行動畫

// 自定義隊列，這裏並不會當即執行
$("div")
  .velocity({ translateX: 75 }, { queue: "a" })
  .velocity({ width: 50 }, { queue: "b" })
  .velocity({ translateY: 75 }, { queue: "a" })
  .velocity({ height: 0 }, { queue: "b" })

// 2秒後 執行隊列"a"的動畫
setTimeout(function() {
  $("div").dequeue("a");
}, 2000);

// 4秒後 執行隊列"b"的動畫
setTimeout(function() {
  $("div").dequeue("b");
}, 4000);

　　[注意]loop循環選項和reverse反向動畫指令，不能和隊列一塊兒使用

【回調函數】

begin()

　　begin爲動畫開始前的回調函數，但在循環模式下(設置loop選項時)，該函數只會在第一次循環前執行一次

$element.velocity({
    opacity: 0
}, {
    begin: function(elements) { console.log(elements); }
});

complete()

　　complete爲動畫結束時的回調函數，在無限循環模式下（設置loop: true）該回調函數將不會執行，可是有規定次數的循環模式下（好比設置loop: 3）該回調函數將只會在最後一次循環結束後執行一次

$element.velocity({
    opacity: 0
}, {
    complete: function(elements) { console.log(elements); }
});

$element.velocity({
    opacity: 0
}, {
    // 動畫循環執行3次
    loop: 3,
    // 回調函數將在第3次循環結束後 執行一次
    complete: function(elements) {
        alert("I am hungry！");
    }
});

progress()

　　progress爲動畫執行過程當中調用的函數，有elements、complete、remaining、start、tweenValue5個參數

elements：當前執行動畫的元素，能夠用$(elements)來獲取
complete：整個動畫過程執行到百分之多少，該值是遞增的，注意：該值爲一個十進制數值並不帶單位(%)
remaining：整個動畫過程還剩下多少毫秒，該值是遞減的
start：動畫開始時的絕對時間 (Unix time)
tweenValue：動畫執行過程當中 兩個動畫屬性之間的補間值

$element.velocity({
    opacity: 0,
    tween: 1000 // 可選的
}, {
    duration: 2000,
    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)
    }
});

【移動端加速】

　　mobileHA能夠設置是否開始移動端硬件加速，默認值爲true，也能夠經過設置 mobileHA: false關閉硬件加速

// 關閉移動端硬件加速
$element.velocity(propertiesMap, { mobileHA: false });

【Loop動畫循環執行】

　　設置loop爲一個正整數，好比設置loop: 2，就可讓動畫循環執行2次

// 循環執行2次（注意：元素height值變化到10em 再從10em變化到初始值 是一次循環）
$element.velocity({ height: "10em" }, { loop: 2 });

　　若是設置loop: true，可讓動畫無限循環執行

$element.velocity({ height: "10em" }, { loop: true });

【Delay動畫延遲執行】

　　和 jQuery 的$.delay()方法同樣，動畫將會延遲所設定的毫秒後執行

// 動畫將延遲1500毫秒後執行
$element.velocity({ height: "+=10em" }, { delay: 1500 });

【display 和 visibility】

　　能夠在動畫執行結束後動態設置元素的 css 屬性display或visibility

/* 動畫結束後 元素 display 屬性設爲 "none" */
$element.velocity({ opacity: 0 }, { display: "none" });

/* 動畫結束後 元素的 visibility 屬性設爲 hidden */
$element.velocity({ opacity: 0 }, { visibility: "hidden" });

　　display 或 visibility 的值能夠設爲 css 中規定的其餘值，好比 display: "inline-block"

　　[注意]當使用reverse方向動畫指令時，display 和 visibility 選項都將被忽略。

動畫指令

　　Velocity 中預約義了幾個經常使用的快捷動畫指令

【fade】

　　Fade對應爲"fadeIn"(淡入) 和"fadeOut"(淡出) 兩個動畫指令，和 jQuery 的$.fadeIn()和$.fadeOut()類似

　　Fade 和 Slide 動畫指令都會動態設置元素的display屬性顯示或隱藏。默認狀況下，當元素被顯示，若是是塊級元素(如<div>)，就會被設置成display: block，若是是行級元素(如<span>)，就會被設爲display: inline。Velocity會根據元素的標籤類型設置最適合的值

　　若是在配置項中設置了display選項爲某值時，動畫結束時該值會覆蓋 Fade 和 Slide 所設置的display屬性值

// 元素會執行平滑淡入的效果
// 當動畫結束時 元素的 display 屬性會被設置成 "table"
$element.velocity("fadeIn", { display: "table" });

　　下面是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
var OnOff = true;
$("#btn").click(function(){
  if(OnOff = !OnOff){
    $("#test").velocity("fadeIn"); 
  }else{
    $("#test").velocity("fadeOut"); 
  } 
})
</script>

【slide】

　　Slide 對應爲:"slideUp"(收起) 和"slideDown"(展開)兩個動畫指令，和 jQuery 的$.slideUp(),$.slideDown()方法類似，經過動態調整元素的height屬性，讓元素 "收起" 或 "下拉"

// 元素會先"收起"隱藏，延遲500毫秒後 再"下拉"顯示
$element
    .velocity("slideUp", { duration: 1500 })
    .velocity("slideDown", { delay: 500, duration: 1500 });

　　下面是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
var OnOff = false;
$("#btn").click(function(){
  if(OnOff = !OnOff){
    $("#test").velocity("slideUp"); 
  }else{
    $("#test").velocity("slideDown"); 
  } 
})
</script>

【scroll】

　　一、滾動瀏覽器內容到目標元素的位置

　　"scroll"動畫指令，好比經常使用的回頂動畫就可使用這個指令

/* 回頂動畫，滾動瀏覽器內容到 <body> 的頂部 */
$("body").velocity("scroll", { duration: 500, easing: "easeOutQuart" });

　　下面是一個例子

<body style="height:2000px">
<button id="btn" style="position:fixed;right:0;bottom:0">回到頂部</button>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#btn").click(function(){
  $(document.documentElement).velocity("scroll", { duration: 500, easing: "easeOutQuart" });
})
</script> 
</body>

　　二、滾動元素內容到目標位置

　　當一個元素的內容部分溢出產生滾動條，可使用"scroll"將內容滾動到指定的位置，container選項對應爲該元素的選擇器

/* 讓 $("#container") 元素的內容滾動到內部子元素 $("#element3") 所在的位置. */
$("#element3").velocity("scroll", { container: $("#container") });

<div id="box" style="height:100px;width:200px;overflow:auto">
  <p id="element1">1 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element2">2 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
  <p id="element3">3 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element4">4 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element5">5 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element6">6 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p> 
</div>
<button id="btn">到第四段</button>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#btn").click(function(){
  $("#element4").velocity("scroll", { container: $("#box"), easing: "easeOutQuart" });
})
</script>

　　三、設置滾動相對偏移量

　　能夠設置相對偏移量，單位默認爲px

$element
    /* 滾動到相對 $element 向下偏移250px的地方 */
    .velocity("scroll", { duration: 750, offset: 250 })
    /* 再滾動到相對 $element 向上偏移50px的地方 */
    .velocity("scroll", { duration: 750, offset: -50 });

　　另外，當滾動整個瀏覽器窗口時，若是目標元素爲<html>，能夠關閉硬件加速，設置mobileHA: false來避免 iOS 中可能出現的頁面閃動問題

/* 滾動整個頁面到一個任意值 */
$("html").velocity("scroll", { offset: "750px", mobileHA: false });

【stop】

　　"stop"指令，可使當前正在執行的動畫當即中止，相似 jQuery 的$.stop()方法

$element.velocity("stop"); // 中止正在執行的 $element 元素的動畫
$element.velocity("stop", "myQueue"); // 中止某自定義隊列
$element.velocity({ left: 100 });
// 點擊 $("#button")，當即中止當前正在執行的 left 動畫
// 並當即反向執行 left 動畫 (right 方向運動)
$("#button").on("click", function() {
    $element.velocity("stop").velocity("reverse");
});

　　設置stop: true, 能夠中止並清空當前正在執行的整個動畫隊列

$element
    .velocity({ width: 100 }, 1000)
    .velocity({ height: 200 }, 1000);

// 若是元素正在執行 width 動畫，點擊 $("#button") 將當即中止當前動畫
// 並移除和跳過將要執行的 height 動畫隊列
$("#button").on("click", function() {
    $element.velocity("stop", true);
});

【finish】

　　"finish"指令會中止當前正在執行的動畫，並直接跳轉到動畫結束的狀態（無過渡）

【reverse】

　　"reverse"指令使動畫反向執行，就像讓一部電影倒着播放。 Reverse 默認會繼承以前動畫的配置選項（好比duration,easing等），但也能夠從新設置

$element
    .velocity({ left: 200 }, { duration: 500 })
    .velocity("reverse", { duration: 2000 });

　　下面是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({left:200}).velocity("reverse"); 

})
</script>

特點動畫

　　Velocity 提供了一些特點動畫功能

【transform】

　　Velocity 支持2D/3D變換動畫，好比translate, scale, rotate, skew等

$element.velocity({
    translateX: "200px",
    rotateZ: "45deg"
});

　　如下列舉了全部經常使用的 transform 相關可用屬性：

{
    /* translate */
    translateX: 20,     // 等同於"20px"
    translateY: "1.5em",
    translateZ: "20px", // IE10+

    /* scale */
    scale: 0.5,
    scaleX: 0.5,
    scaleY: 0.5,

    /* rotate */
    rotate: 45,       // 等同於"45deg"
    rotateX: "45deg", // IE10+
    rotateY: "45deg", // IE10+
    rotateZ: "45deg",

    /* skew */
    skewX: "30deg",
    skewY: "30deg",
}

　　[注意]瀏覽器支持：> IE9

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({rotateZ: "45deg"}).velocity("reverse"); 
})
</script>

【colors】

　　Velocity顏色動畫支持的顏色屬性有:color, backgroundColor, borderColor, outlineColor。屬性值支持:rgb, hsla, 十六進制顏色碼，但不支持關鍵詞好比:"green"

$element.velocity({
    backgroundColor: "#ff0000",
    /* 背景色 RGBA 中的 A 透明度到50%  */
    backgroundColorAlpha: 0.5,
    /* 字體顏色 RGB 中的 Red 到 50% (0.5 * 255) */
    colorRed: "50%",
    /* 字體顏色 RGB 中的 Blue 值疊加50 */
    colorBlue: "+=50",
    /* 字體顏色 RGBA 中的 A 透明度到85% */
    colorAlpha: 0.85
});

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({backgroundColor: "#0f0"}).velocity("reverse"); 
})
</script>

【svg】

　　Velocity 支持 SVG 元素動畫，包含全部經常使用 SVG 屬性，例如:x, y, rx, fill, stroke-width, opacity 等

$svgRectangle.velocity({
    /* 座標動畫 */
    x: 200,
    r: 25,
    /* 2D 變換動畫 */
    translateX: "200px",
    /* 3D 變換動畫（非IE瀏覽器） */
    translateZ: "200px",
    /* 顏色填充動畫 "Fill" */
    fill: "#ff0000",
    strokeRed: 255,
    strokeGreen: 0,
    strokeBlue: 0,
    /* 一些標準的 CSS 屬性動畫 */
    opacity: 1,
    width: "50%"
});

　　[注意]瀏覽器支持：>= IE9 和 >= Android 3.0

【Hook】

　　Hook 能夠設置多個CSS屬性中的單獨一個值，好比 "boxShadow", "clip"等，做用與 jQuery 的$.css()方法類似

$.Velocity.hook($element, "translateX", "500px"); // 值必須寫上單位
$.Velocity.hook(elementNode, "textShadowBlur", "10px"); // 值必須寫上單位

　　還能夠獲取單個 CSS 屬性的值

$.Velocity.hook($element, "translateX"); // 獲取元素的translateX值
$.Velocity.hook(elementNode, "textShadowBlur");

【promises】

　　Velocity 可使用 ES6 的 Promises 對象的語法方式

/* 使用 Velocity 的公有方法，$element 爲dom選擇器 能夠用jQuery的 或 原生js的 */
$.Velocity.animate($element, { opacity: 0.5 })
    /* 一旦動畫執行完成 執行下面.then()中的回調函數（能夠寫多個.then()）*/
    .then(function(elements) { console.log("Resolved."); })
    /* 捕獲錯誤後的回調函數 */
    .catch(function(error) { console.log("Rejected."); });

【Mock】

　　若是設置$.Velocity.mock = true; 會強制頁面裏全部的 Velocity 動畫的duration和delay值爲0ms，動畫會直接跳轉到結束狀態，這個方法經常使用於代碼調試

　　也能夠將$.Velocity.mock設置爲一個整數，能夠加快或減慢頁面上全部的 Velocity 動畫速度

/* 頁面裏全部 Velocity 動畫 將以10爲係數減慢 */
$.Velocity.mock = 10;

【Utility Function】

　　Velocity 的公有方法

/* 標準的多參數語法 */
var divs = document.getElementsByTagName("div");
$.Velocity(divs, { opacity: 0 }, { duration: 1500 });

　　另外一種寫法：

// 可選的單參數語法（idea 來源於 CoffeeScript）
// e：element - 元素，一個dom選擇器
// p: properties - 屬性map { property1: value1, property2: value2, … }
// o: options - 配置選項
var divs = document.getElementsByTagName("div");
$.Velocity({ e: divs, p: { opacity: 0 }, o: { duration: 1500 });

高級用法

【函數】

　　屬性值可經過傳遞一個函數來設置動畫效果

// 使 $element 的透明度隨機到一個值 的動畫，每次執行後 元素透明度都不一樣
$element.velocity({
    opacity: function() { return Math.random() }
});

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({opacity: function() {return Math.random()}});
})
</script>

【初始值】

　　一般，在動畫執行前，動畫引擎會先查詢 DOM 以肯定元素的初始值， Velocity 可讓用戶自定義元素初始值，這樣能夠避免 DOM 查詢

$element.velocity({
    /* translateX 初始值永遠爲0 動畫結束值爲500px */
    translateX: [ 500, 0 ],
    /* opacity 初始值永遠爲0 動畫結束值爲1 緩動效果爲"easeInSine" */
    opacity: [ 0, "easeInSine", 1 ]
});

$element
    /* 對於這個鏈式動畫，在每次動畫開始前 元素的 translateX 初始值仍是0 */
    .velocity({ translateX: [ 500, 0 ] })
    .velocity({ translateX: 1000 });

　　下面是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({ left: [ 500, 100 ] }).velocity("reverse");
  })
</script>

UI插件

　　velocity.ui.js 是 velocity.js 的動畫插件，能夠用它快速建立炫酷的動畫特效，它依賴於velocity.js

　　velocity.ui 有2個重要方法:$.Velocity.RegisterEffect()和 $.Velocity.RunSequence()

　　前者將多個 Velocity 動畫合併存儲到一個自定義數組裏，能夠經過引用該數組的名稱在項目中複用，後者能改進嵌套的動畫序列使得更易於管理

【$.Velocity.RunSequence()】

　　若是嵌套動畫的嵌套層次不少時，會難以管理

$element1.velocity({ translateX: 100 }, 1000, function() {
    $element2.velocity({ translateX: 200 }, 1000, function() {
        $element3.velocity({ translateX: 300 }, 1000);
    });
});

　　如何解決上面的問題？直接用$.Velocity.RunSequence()對上面代碼進行重寫：

e：element - 表示元素
p：properties - 屬性集
o：options - 配置選項

// 將嵌套動畫序列儲存到一個數組裏，很清晰的顯示了它們的執行順序
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);

【內置特效】

　　Velocity.ui.js 內置了不少經常使用的動畫特效，分爲 callout.* 和 transition.* 兩類，下面是全部的特效名：

callout.bounce
callout.shake
callout.flash
callout.pulse
callout.swing
callout.tada
transition.fadeIn
transition.fadeOut
transition.flipXIn
transition.flipXOut
transition.flipYIn
transition.flipYOut
transition.flipBounceXIn
transition.flipBounceXOut
transition.flipBounceYIn
transition.flipBounceYOut
transition.swoopIn
transition.swoopOut
transition.whirlIn
transition.whirlOut
transition.shrinkIn
transition.shrinkOut
transition.expandIn
transition.expandOut
transition.bounceIn
transition.bounceUpIn
transition.bounceUpOut
transition.bounceDownIn
transition.bounceDownOut
transition.bounceLeftIn
transition.bounceLeftOut
transition.bounceRightIn
transition.bounceRightOut
transition.slideUpIn
transition.slideUpOut
transition.slideDownIn
transition.slideDownOut
transition.slideLeftIn
transition.slideLeftOut
transition.slideRightIn
transition.slideRightOut
transition.slideUpBigIn
transition.slideUpBigOut
transition.slideDownBigIn
transition.slideDownBigOut
transition.slideLeftBigIn
transition.slideLeftBigOut
transition.slideRightBigIn
transition.slideRightBigOut
transition.perspectiveUpIn
transition.perspectiveUpOut
transition.perspectiveDownIn
transition.perspectiveDownOut
transition.perspectiveLeftIn
transition.perspectiveLeftOut
transition.perspectiveRightIn
transition.perspectiveRightOut

【stagger, drag 和 backwards 選項】

　　velocity.ui 有stagger,drag,backwards 三個可選配置項

　　[注意]這些選項只在調用內置動畫特效時才起做用

stagger

　　中文譯爲"錯開"，當遍歷一組元素時 (each)，設置 stagger 爲一個毫秒數 (ms) 能讓每一個元素依次延遲該毫秒數執行動畫，產生一種錯開的運動節奏感

// 默認狀況下，三個元素會同時運動
// 這裏設置了 stagger 爲 300 後，每一個元素會依次延遲300ms執行動畫
$(".box-stagger").velocity("transition.slideLeftBigIn", { stagger: 300 });

　　下面是一個例子

<style>
.box-stagger{width: 100px;height: 100px;border:1px solid black;background:lightgreen;line-height: 100px;color:white;text-align: center;} 
</style>

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div class="box-stagger">1</div>
<div class="box-stagger">2</div>
<div class="box-stagger">3</div>

<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $(".box-stagger").velocity("transition.slideLeftBigIn", { stagger: 300 });
})
</script>

drag

　　遍歷一組元素時 (each)，當設置drag: true，最後一個元素會產生一種相似緩衝的效果，但它和其餘元素的動畫的duration是同樣的

// 最後一個元素產生緩衝效果
$(".box-drag").velocity("transition.slideLeftBigIn", { drag: true });

　　下面是一個例子

<style>
.box-drag{width: 100px;height: 100px;border:1px solid black;background:lightgreen;line-height: 100px;color:white;text-align: center;} 
</style>

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div class="box-drag">1</div>
<div class="box-drag">2</div>
<div class="box-drag">3</div>

<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $(".box-drag").velocity("transition.slideLeftBigIn", { drag: true });
})
</script>

backwards

　　中文譯爲"向後的"，這個選項一般和drag一塊兒使用，元素會從最後一個開始依次延遲執行動畫

$('.box-backwards').velocity('transition.slideLeftBigIn', {
    stagger: 300,
    backwards: true
});

　　下面是一個例子

<style>
.box-backwards{width: 100px;height: 100px;border:1px solid black;background:lightgreen;line-height: 100px;color:white;text-align: center;} 
</style>

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div class="box-backwards">1</div>
<div class="box-backwards">2</div>
<div class="box-backwards">3</div>

<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $('.box-backwards').velocity('transition.slideLeftBigIn', {
    stagger: 300,
    backwards: true
  });
})
</script>

【 $.Velocity.RegisterEffect()】

　　$.Velocity.RegisterEffect()方法容許註冊自定義動畫特效，以便在項目中複用

// name：動畫特效名稱 爲字符串類型
// defaultDuration：默認動畫執行時間 單位爲毫秒(ms)
// calls：動畫隊列數組，property - 動畫屬性，durationPercentage - 當前動畫所佔總時間的百分比 (寫成浮點數)，option - 選項
// reset：設置元素在動畫開始時的初始值
$.Velocity.RegisterEffect(name, {
    defaultDuration: duration,
    calls: [
        [ { property: value }, durationPercentage, { options } ],
        [ { property: value }, durationPercentage, { options } ]
    ],
    reset: { property: value, property: value }
});

　　下面是一個使用$.Velocity.RegisterEffect()的例子

$.Velocity.RegisterEffect("callout.customPulse", {
    defaultDuration: 900,
    calls: [
        [ { scaleX: 1.5 }, 0.50 ], // 0.50 爲 動畫總時間的50%
        [ { scaleX: 1 }, 0.50 ]
    ]
});

// 調用
$element.velocity("callout.customPulse");

<div id="test" style="height: 100px;width: 100px;background:lightgreen;border-radius: 50%;"></div>
<script>
$.Velocity.RegisterEffect("callout.customPulse", {
    defaultDuration: 900,
    calls: [
        [ { scaleX: 1.5 }, 0.50 ],
        [ { scaleX: 1 }, 0.50 ]
    ]
});
$("#test").click(function(){
  $(this).velocity("callout.customPulse");
})
</script>

　　還可使用鏈式的寫法註冊一系列自定義動畫

$.Velocity
    .RegisterEffect("transition.customFlipXIn", {
        defaultDuration: 700,
        calls: [
            [ { opacity: 1, rotateY: [ 0, -55 ] } ]
        ]
    });
    .RegisterEffect("transition.customFlipXOut", {
        defaultDuration: 700,
        calls: [
            [ { opacity: 0, rotateY: 55 } ]
        ],
        reset: { rotateY: 0 }
    });

// 調用
$element
    .velocity("transition.customFlipXIn")
    .velocity("transition.customFlipXOut", { delay: 1000, display: "none" });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。