可視化CSS3動畫代碼生成js庫插件-Bounce.js

簡要教程
　　Bounce.js是一款功能很是強大的可視化CSS3動畫代碼生成js庫插件。該js庫插件提供了一個在線APP，經過該APP能夠在可視化的條件下編輯CSS3的各類動畫效果，如移動、旋轉、傾斜、easing等效果，編輯完成後能夠直接獲取該CSS3幀動畫的代碼，複製代碼到你的頁面中便可在你的頁面上得到與該動畫同樣的效果。此外，你也能夠單獨使用Bounce.js，經過js代碼來完成各類CSS3動畫效果。Bounce.js能與jQuery完美結合。

查看演示     下載插件

　　安裝
　　能夠經過Bower 或 NPM來安裝Bounce.js。

1. $ bower install bounce.js 
   

2. # OR
   

3. $ npm install bounce.js

複製代碼

　　使用方法
　　要使用bounce.js來建立CSS3動畫，首先要建立一個Bounce對象。

1. var bounce = new Bounce();

複製代碼

　　製做CSS3動畫前必須先建立Bounce對象，而後使用該對象來添加各類動畫組件：scale、rotate、translate和skew。你能夠爲CSS3動畫定義一個名稱，或者直接在該對象上應用頁面上的某個元素。

　　添加CSS3動畫組件

　　scale
　　如上面所說的，你要使用scale、rotate、translate或skew方法來建立動畫。所用這些方法都接收必定數量的參數，如from和to參數定義動畫元素的開始和結束位置。所用這些方法都是能夠鏈式編程的。

1. var bounce = new Bounce();
   

2. bounce.scale({
   

3.   from: { x: 0.5, y: 0.5 },
   

4.   to: { x: 1, y: 1 }
   

5. });   

複製代碼

　　上面代碼中的from和to參數定義了元素在X軸(寬度)和Y軸(高度)上scale的比例。這個例子使元素從50%的大小變化到100%的大小。點擊這裏查看這個demo。

　　rotate

1. var bounce = new Bounce();
   

2. bounce.rotate({
   

3.   from: 0,
   

4.   to: 90
   

5. });      

複製代碼

　　上面代碼中的from和to參數定義了元素旋轉的度數。點擊這裏查看這個demo。

　　translate

1. var bounce = new Bounce();
   

2. bounce.translate({
   

3.   from: { x: 0, y: 0 },
   

4.   to: { x: 100, y: 0 }
   

5. });     

複製代碼

　　上面代碼中的from和to參數定義了元素在X軸和Y軸上移動的距離(單位像素)。上面的例子將元素向右移動100像素。點擊這裏查看這個demo。

　　skew

1. var bounce = new Bounce();
   

2. bounce.skew({
   

3.   from: { x: 0, y: 0 },
   

4.   to: { x: 20, y: 0 }
   

5. });      

複製代碼

　　上面代碼中的from和to參數定義了元素在X軸和Y軸傾斜的度數。上面的例子在X軸上傾斜20度。點擊這裏查看這個demo。

　　通用參數
　　上面的因此方法均可以使用下面的參數：

• 　　duration：CSS3動畫的持續時間，單位毫秒，默認值1000。

• 　　delay：CSS3動畫的延遲時間，單位毫秒，默認值0。

• 　　easing：easing效果。可選值有："bounce", "sway", "hardbounce", "hardsway"，默認值爲：bounce。

• 　　bounces：The number of bounces in the animation. Defaults to 4.

• 　　stiffness：動畫反彈的硬度。值必須在1-5之間，默認值3。
  

　　應用舉例
　　當你使用Bounce.js來製做CSS3動畫的時候，你能夠選擇建立幀動畫，或者直接將動畫應用到網頁元素上。

　　define

1. var bounce = new Bounce();
   

2. bounce.rotate({
   

3.   from: 0,
   

4.   to: 90
   

5. });
   

6. bounce.define("my-animation");      

複製代碼

　　經過給定的名稱來定義一個CSS3幀動畫。你能夠在CSS文件中使用animation: my-animation 1s linear both;來應用這個動畫效果。

　　applyTo

1. var bounce = new Bounce();
   

2. bounce.rotate({
   

3.   from: 0,
   

4.   to: 90
   

5. });
   

6. bounce.applyTo(document.querySelectorAll(".animation-target"));
   

7. // or with jQuery: bounce.applyTo($(".animation-target"));      

複製代碼

　　你也能夠將動畫效果直接應用到單個或一組元素上。使用這個方法還能接受下面的參數：

• 　　loop：若是該參數設置爲true則動畫無限循環。默認值爲false。

• 　　remove：當動畫結束後就移除該動畫。若是動畫的接受狀態和開始狀態不同，那麼元素在某些瀏覽器上會回到它的初始狀態。默認值爲false。

• 　　onComplete：在動畫結束後的回調函數。
  

　　若是你使用jQuery，該方法將返回一個promise，它能夠在onComplete的參數上使用：

1. bounce.applyTo($(".animation-target")).then(function() { 
   

2.   console.log("Animation Complete"); 
   

3. });      

複製代碼

　　Remove
　　你也能夠手動移除一個Bounce動畫。

1. bounce.remove()     

複製代碼

　　綜合應用
　　下面是一個綜合應用的例子,點擊這裏查看這個demo：

1. var bounce = new Bounce();
   

2. bounce
   

3.   .translate({
   

4.     from: { x: -300, y: 0 },
   

5.     to: { x: 0, y: 0 },
   

6.     duration: 600,
   

7.     stiffness: 4
   

8.   })
   

9.   .scale({
   

10.     from: { x: 1, y: 1 },
    

11.     to: { x: 0.1, y: 2.3 },
    

12.     easing: "sway",
    

13.     duration: 800,
    

14.     delay: 65,
    

15.     stiffness: 2
    

16.   })
    

17.   .scale({
    

18.     from: { x: 1, y: 1},
    

19.     to: { x: 3, y: 1 },
    

20.     easing: "sway",
    

21.     duration: 300,
    

22.     delay: 30,
    

23.   })
    

24.   .applyTo(document.querySelectorAll(".animation-target"));     

複製代碼

　　瀏覽器支持
　　你能夠經過下面的方法來檢測當前的瀏覽器是否支持Bounce生成的CSS3動畫。

1. Bounce.isSupported()      

複製代碼

　　Bounce js動畫庫能夠在全部支持3D transforms和keyframe animations的瀏覽器上工做。