snabbt.js 強大的jQuery動畫庫插件

簡要教程

snabbt.js是一款輕量級的、功能強大的、簡單易用的jQuery動畫庫插件。snabbt.js的每秒傳輸幀數(刷新率)達到60FPS，即使是移動設備上也能達到這個數值。它的大小只有4KB，非常輕便。

使用snabbt.js可以很容Q的將元素移動、旋轉、放大縮小、傾斜和改變元素的大小。通過使用矩陣乘法運算(matrix multiplication operations)，你可以結合各種變換動畫來制作你想要的動畫效果。它得到的效果比CSS3 transform效果更加好。

snabbt.js的運行速度相當快，它致力于讓開發者制作平滑的動畫而不需要知道太多關于瀏覽器渲染方面的知識。

注意：高度和寬度同樣也可以被動畫，但他們可能會照成頁面溢出和使你的動畫速度變慢。

查看演示      下載插件

局限性

• 所有的變換動畫都是基于像素或弧度，任何單位轉換都要事先做好。
• 不是所有屬性都可以進行動畫。如：顏色、paddings、margins或行高的動畫。
• 處于性能的原因，snabbt.js從來不會去查詢DOM信息。

使用方法

動畫通過snabbt函數來調用。函數的第一個參數是要動畫的元素，第二個參數是動畫的參數，它被包裝為一個對象。

snabbt(element, {
  position: [100, 0, 0],
  rotation: [Math.PI, 0, 0],
  duration: 1000,
  delay: 100,
  easing: 'ease'
});

鏈式編程

動畫可以通過在返回的對話對象上使用 then() 方法來進行鏈式編程。所有的 from_xxx 屬性都鍵被設置前一個動畫的結束狀態。

snabbt(element, {
  position: [100, 0, 0],
  easing: 'ease'
}).then({
  from_rotation: [0, 0, -2*Math.PI],
  easing: 'spring',
  spring_constant: 0.2,
  spring_deaccelaration: 0.95,
});

jQuery

snabbt.js可以不使用jQuery而單獨運行。如果snabbt.js檢測到jQuery，那么它將被作為jQuery插件來調用。當通過jQuery來使用snabbt.js的時候，第一個參數是動畫的配置對象。如下所示：

作為jQuery插件使用

$element.snabbt({
  position: [150, 0, 0],
  rotation: [0, 0, Math.PI],
});

不使用jQuery

snabbt(element, {
  position: [150, 0, 0],
  rotation: [0, 0, Math.PI],
});

Easing效果

snabbt.js包含4個easing效果：linear、ease、ease-in 和 ease-out。你可以使用自定義easing效果或使用Spring easing效果(下面講解)。

自定義easing效果

使用一種easing效果的名稱作為函數來調用：

snabbt(element, {
  position: [200, 0, 0],
  easing: function(value) {
    return Math.sin(Math.PI * value);
  }
});

Spring easing

當使用Spring easing的時候，duration 參數是沒有效果的。動畫將一直運行到平衡為止。當設置為Spring easing時，有三個附加參數可以使用：

• spring_constant ：動畫的強度。
• spring_deaccelaration ：控制放慢速度。
• spring_mass ：對象的“重量”。

snabbt(element, {
  position: [100, 0, 0],
  rotation: [0, 0, 2*Math.PI],
  easing: 'spring',
  spring_constant: 0.3,
  spring_deacceleration: 0.8,
}).then({
  rotation: [0, 0, 2*Math.PI],
  easing: 'ease'
});

高級用法

下面是snabbt.js的一些高級用法。

Value feeding

單獨的動畫對象很容易控制，但是在多個動畫對象時就有些困難了。有時候你想在另一個動畫中執行某個動畫轉換效果，這時候就是使用Value feeding的時候了。value_feeder的參數包含一個從0到1變化的參數。每一次調用你都要返回一個代表當前動畫的snabbtjs.matrix(看后面的Matrix API)對象。

snabbt(element, {
  value_feeder: function(i) {
    var x = Math.sin(i*Math.PI);
    return snabbtjs.mult(snabbtjs.rotZ(Math.sin(6*i*Math.PI)), snabbtjs.trans(x*400, 0, 0));
  },
  duration: 1000
});

Attention animations

snabbt.js也支持原地動畫。這對于一些表單驗證時的按鈕動畫是非常有用的。看例子：

snabbt(element, 'attention', {
  rotation: [0, 0, Math.PI/2],
  spring_constant: 1.9,
  spring_deacceleration: 0.9,
});

snabbt(element, 'attention', {
  position: [50, 0, 0],
  spring_constant: 2.4,
  spring_deacceleration: 0.9,
});

Matrix API

下面是Matrix API的一些函數：

• snabbtjs.ident() ：返回單位矩陣。
• snabbtjs.trans(x, y, z) ：返回矩陣的translation。
• snabbtjs.rotX(radians) ：返回繞x軸旋轉的值。
• snabbtjs.rotY(radians) ：返回繞y軸旋轉的值。
• snabbtjs.rotZ(radians) ：返回繞z軸旋轉的值。
• snabbtjs.scale(x, y) ：返回一個變換矩陣。
• snabbtjs.skew(ax, ay) ：返回一個傾斜矩陣。
• snabbtjs.mult(A, B) ：返回一個A * B的矩陣乘積。

動畫參數配置

下面的參數可以用于配置一個動畫對象。

from_xxx可以設置更多的屬性：

來源：jQuery之家