Velocity.js 中文文檔

時間 2019-12-08

標籤 velocity.js velocity 中文文檔欄目 JavaScript 简体版

原文原文鏈接

概述

Velocity 是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協做，並和$.animate()有相同的 API，但它不依賴 jQuery，可單獨使用。 Velocity 不只包含了 $.animate() 的所有功能，還擁有：顏色動畫、轉換動畫(transforms)、循環、緩動、SVG 動畫、和滾動動畫等特點功能。
javascript

它比 $.animate() 更快更流暢，性能甚至高於 CSS3 animation，是 jQuery 和 CSS3 transition 的最佳組合，它支持全部現代瀏覽器，最低可兼容到 IE8 和 Android 2.3。css

Velocity 目前已被數以千計的公司使用在本身的項目中，包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等，這裏 Libscore.com 統計了哪些站點正使用 velocity.js。html

英文官網：http://velocityjs.org/下載 Velocity.jsjava

先來看第一個 Velocity 的例子：jquery

HTML

<body> <!-- dom --> <div class="element"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script> </body>

JavaScript

// 標準寫法 // (爲了簡潔，後面的示例代碼中 將直接使用 $element 來代替 jQuery 選擇器) $(".element").velocity({ left: "200px" }, { duration: 450, delay: 1000 }); // $.animate() 的寫法，效果同上 $(".element").delay(1000).velocity({left: "200px"}, 450);

你能夠經過 npm 或 bower 安裝 Velocity：git

npm：npm install velocity-animate
bower：bower install velocitygithub

Basics 基礎用法

1. Dependencies 模塊依賴

1-1. Velocity 不依賴 jQuery

Velocity.js 能夠在不引入 jQuery 的狀況下單獨使用。若是你須要大部分動畫效果能兼容 IE8，就必須引入 jQuery 1×。它也能夠和 Zepto 一塊兒使用，寫法和 jQuery 同樣：ajax

JavaScript

// 無 jQuery 或 Zepto 時，Velocity()方法掛載在 window 對象上 (window.velocity) // ( 第一個參數爲原生js的dom選擇器 ) Velocity(document.getElementById("dummy"), { opacity: 0.5 }, { duration: 1000 }); // 使用 jQuery 或 Zepto 時 $("#dummy").velocity({ opacity: 0.5 }, { duration: 1000 });

1-2. 模塊加載器：Webpack, Browserify

使用 jQuery 時，必須在 Velocity 以前加載 jQuery：npm

JavaScript

window.jQuery = window.$ = require("path/to/jquery-x.x.x.js"); require("path/to/velocity.js"); require("path/to/velocity.ui.js"); // velocity.ui 在 velocity 以後加載 /* Your app code here. */ $("body").velocity({ opacity: 0.5 });

不使用 jQuery 就直接加載 Velocity：api

JavaScript

var Velocity = require("path/to/velocity.js"); require("path/to/velocity.ui.js"); /* Your app code here. */ Velocity(document.body, { opacity: 0.5 });

1-3. 模塊加載器：RequireJS

JavaScript

require.config({ paths: { "jquery": "/path/to/jquery-x.x.x", "velocity": "path/to/velocity", // 若是你使用了 velocity.ui "velocity-ui": "path/to/velocity.ui" }, shim: { "velocity": { deps: [ "jquery" ] }, // velocity.ui 依賴 velocity "velocity-ui": { deps: [ "velocity" ] } } }); require([ "jquery", "velocity", "velocity-ui" ], function ($, Velocity) { /* Your app code here. */ $("body").velocity({ opacity: 0.5 }); });

2. Arguments 參數

2-1. 參數概述和基礎寫法：

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

JavaScript

$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 // 移動端硬件加速（默認開啓） });

2-2. 單一對象的參數寫法：

Velocity 也支持 single-argument 的語法，看下面示例：

JavaScript

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

2-3. 逗號分割的參數寫法（相似 $.animate）：

JavaScript

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

3. Properties Map 動畫屬性

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

JavaScript

// 等同 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+ )

JavaScript

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

4. Chaining 鏈式動畫

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

JavaScript

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

Velocity.js 中文文檔

概述

Basics 基礎用法

1. Dependencies 模塊依賴

1-1. Velocity 不依賴 jQuery

1-2. 模塊加載器：Webpack, Browserify

1-3. 模塊加載器：RequireJS

2. Arguments 參數

2-1. 參數概述和基礎寫法：

2-2. 單一對象的參數寫法：

2-3. 逗號分割的參數寫法（相似 $.animate）：

3. Properties Map 動畫屬性

4. Chaining 鏈式動畫

導航