Velocity.js動畫庫使用
阿新 • • 發佈：2018-02-08
defined itl src 管理 2.3 meta 單獨 enc 需要
1、簡介
Velocity 是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協作，並和$.animate()有相同的 API， 但它不依賴 jQuery，可單獨使用。
2、兼容性
可兼容到 IE8 和 Android 2.3。
若需要兼容 IE8，就必須引入 jQuery 1.x
3、示例代碼(註意文件引用路徑)
（1）index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"
（2）style.css
.box{
width: 100px;
height: 100px;
background-color: pink;
}
(3)index.js
(function($) {
// $(‘#div1‘).velocity({
// width: ‘300px‘
// }, {
// //動畫時長
// duration: 3000,
// //動畫執行完後執行的回調
// complete: function() {
// $(‘#div2‘).velocity({
// width: ‘300px‘
// }, {
// duration: 3000
// })
// }
// });
//動畫序列
// var seq = [{
// elements: $(‘#div1‘),
// properties: {
// width: ‘300px‘
// },
// options: {
// durations: 1000
// }
// },
// {
// elements: $(‘#div2‘),
// properties: {
// width: ‘300px‘
// },
// options: {
// durations: 1000
// }
// }
// ];
// $.Velocity.RunSequence(seq);
//預定義動畫
$(‘#div1‘).on(‘mouseover‘,function(){
$(this).velocity(‘callout.shake‘)
});
})(jQuery);
4、使用
（1）參數配置：
$element.velocity({
properties: { opacity: 1 },
options: { duration: 500 }
});
// 或者：
$element.velocity({
p: { opacity: 1 }, // 可以將 properties 簡寫成 p
o: { duration: 500 }
});
基礎配置：
$element.velocity({
width: "500px", // 動畫屬性 寬度到 "500px" 的動畫
properties: 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 // 移動端硬件加速（默認開啟）
});
（2）Complete屬性
complete為動畫結束時的回調函數，在無限循環模式下（設置loop: true） 該回調函數將不會執行，但是有規定次數的循環模式下（比如設置設置loop: 3） 該回調函數 將只會在最後一次循環結束後 執行一次。
（3）delay屬性
和 jQuery 的$.delay()方法一樣，動畫將會延遲所設定的毫秒後執行。
（4）支持SVG動畫
（5）velocity.ui.js
velocity.ui.js 是 velocity.js 的 動畫插件（1.8 KB ZIP’ed） 我們可以用它快速創建炫酷的動畫特效，它依賴於 velocity.js。
elocity.ui 有2個重要方法:$.Velocity.RegisterEffect()和 $.Velocity.RunSequence()
前者允許你將多個 Velocity 動畫合並存儲到一個自定義數組裏，你可以通過引用該數組的名稱 在項目中復用， 後者能幫你改進嵌套的動畫序列 使得更易於管理。
Velocity.ui.js 內置了很多常用的動畫特效，分為 callout.* 和 transition.* 兩類。
Velocity.js動畫庫使用