velocityJs-動畫庫

一、概念

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

<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>
    //注：如果需要大部分動畫效果能兼容 IE8，就必須引入 jQuery 1×，如果不需要，則不需要引入jQuery

額外屬性：

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

basics用法（基礎用法）

<div class="element"></div>
$(".element").velocity({
    left: "200px"
}, {
    duration: 450,
    delay: 1000
});

// $.animate() 的寫法，效果同上
$(".element").delay(1000).velocity({left: "200px"}, 450);

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

// 使用 jQuery時
$("#dummy").velocity({
    opacity: 0.5
}, {
    duration: 1000
});

單一對象

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

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


//逗號分割的參數寫法（類似 $.animate）
$element.velocity({ top: 50 }, 1000);
$element.velocity({ top: 50 }, 1000, "swing");
$element.velocity({ top: 50 }, "swing");
$element.velocity({ top: 50 }, 1000, function() { alert("Hi"); });


//Properties Map 動畫屬性
//如果不寫屬性值的單位, 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 還支持動態計算屬性值，包括 "+, -, *, /"，還可以設置元素在動畫執行前的初始值
$element.velocity({
    top: 50,                // 等同於 "50px"
    left: "50%",
    width: "+=5rem",        // 每次在當前值上疊加 5rem
    height: "*=2"           // 每次在當前值上疊乘 2
    color: ["#888", "#000"] // 每次動畫執行前，color 的初始值都爲"#000"（從"#000"過渡成"#888"）
});

//Chaining 鏈式動畫
//當一個元素連續應用多個velocity()時，動畫將以隊列的方式執行
$element
    /* 先執行寬度變爲75px的動畫 */
    .velocity({ width: 75 })
    /* 等前面的寬度動畫結束後，再執行高度變爲0的動畫 */
    .velocity({ height: 0 });

Option 配置項

Duration 動畫執行時間

//動畫執行時間以毫秒爲單位，並支持 jQuery 中的動畫速度關鍵字: "slow","normal","fast"
$element.velocity({ opacity: 1 }, { duration: 1000 });

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

Easing 緩動效果

//1、jQuery UI 的緩動關鍵字
/* 標準寫法 */
$element.velocity({ width: 50 }, { easing: "easeInSine" });

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


//2、CSS3 的緩動關鍵字
$element.velocity({ width: 50 }, "ease-in");

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

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

//5、步驟緩動
$element.velocity({ width: 50 }, [ 8 ]);

//自定義緩動函數
// p：動畫完成的百分比（十進制值）
// opts：傳遞到觸發 .velocity() 調用的選項
// tweenDelta：補間
// (官網並沒有詳細說明如何使用，感興趣的可以自己去查閱相關資料學習)
$.Velocity.Easings.myCustomEasing = function (p, opts, tweenDelta) {
    return 0.5 - Math.cos( p * Math.PI ) / 2;
};

//緩動可應用於單個屬性
$element.velocity({
    borderBottomWidth: [ "2px", "spring" ], // border-bottom 使用 "spring"
    width: [ "100px", [ 250, 15 ] ],        // width 使用 spring physics
    height: "100px"
}, {
    easing: "easeInSine" // 默認所有屬性使用 "easeInSine"
});

Queue 動畫隊列

//通過設置queue: false 強制並行執行一個新動畫
// 執行寬度變爲"50px"的動畫
$element.velocity({ width: "120px" }, { duration: 3000 });

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


//可以自定義動畫隊列，但不會立即執行，需要通過dequeue()方法手動執行動畫
//loop循環選項 和reverse反向動畫指令，不能和隊列一起使用
// 自定義隊列，這裏並不會立即執行
$("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);

Begin & Complete & Progress 回調函數

//1、Begin
//動畫開始前的回調函數，但在循環模式下（設置了loop選項時），該函數只會在第一次循環前執行一次
$element.velocity({
    opacity: 0
}, {
    begin: function(elements) { console.log(elements); }
});

//2、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！");
    }
});

//3、Progress
//爲動畫執行過程中調用的函數， 有elementscomplete, remaining,start, tweenValue5個參數
//elements：當前執行動畫的元素，可以用$(elements)來獲取
//complete：整個動畫過程執行到百分之多少，該值是遞增的，注意：該值爲一個十進制數值 並不帶單位 (%)
//remaining：整個動畫過程還剩下多少毫秒，該值是遞減的
//start：動畫開始時的絕對時間
//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 動畫循環執行

//1、設置loop爲一個正整數，比如如設置loop: 2，就可以讓動畫循環執行2次
// 循環執行2次（注意：元素height值變化到10em 再從10em變化到初始值 是一次循環）
$element.velocity({ height: "10em" }, { loop: 2 });

//2、設置loop: true，可以讓動畫無限循環執行
$element.velocity({ height: "10em" }, { loop: true });

Delay 動畫延遲執行

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

Display & Visibility

//以在動畫執行結束後 動態設置元素的 css 屬性:display或visibility
//display 或 visibility 的值可以設爲 css 中規定的其他值，比如 display: "inline-block"
//當使用reverse方向動畫指令時，display 和 visibility 選項都將被忽略
/* 動畫結束後 元素 display 屬性設爲 "none" */
$element.velocity({ opacity: 0 }, { display: "none" });

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

該插件還有Command 指令、Feature 特色、Advanced 高級用法、Plugins 插件等內容，有需要的童鞋可以戳一下鏈接去看，小編在此就不列舉了。

官網地址：http://shouce.jb51.net/velocity/index.html

velocityJs-動畫庫

一、概念

apisix~helm方式的部署到k8s

firmeye - IoT固件漏洞挖掘工具

vue項目中多行文本超出省略失效解決方式

uploadify---jQuery多文件上傳

input框輸入文本限制

metisMenu側邊欄插件

js 調用 IOS 、Android原生方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結