可視化CSS3動(dòng)畫代碼生成js庫(kù)插件bounce js怎么用

可視化CSS3動(dòng)畫代碼生成js庫(kù)插件bounce js怎么用，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

　　Bounce.js是一款功能非常強(qiáng)大的可視化CSS3動(dòng)畫代碼生成js庫(kù)插件。該js庫(kù)插件提供了一個(gè)在線APP，通過該APP可以在可視化的條件下編輯CSS3的各種動(dòng)畫效果，如移動(dòng)、旋轉(zhuǎn)、傾斜、easing等效果，編輯完成后可以直接獲取該CSS3幀動(dòng)畫的代碼，復(fù)制代碼帶你的頁(yè)面中即可在你的頁(yè)面上獲得與該動(dòng)畫一樣的效果。此外，你也可以單獨(dú)使用Bounce.js，通過js代碼來完成各種CSS3動(dòng)畫效果。Bounce.js能與jQuery完美結(jié)合。

　　Bounce.js安裝

　　可以通過Bower或NPM來安裝Bounce.js。

　　$bowerinstallbounce.js

　　#OR

　　$npminstallbounce.js

　　Bounce.js使用方法

　　要使用bounce.js來創(chuàng)建CSS3動(dòng)畫，首先要?jiǎng)?chuàng)建一個(gè)Bounce對(duì)象。

　　varbounce=newBounce();

　　制作CSS3動(dòng)畫前必須先創(chuàng)建Bounce對(duì)象，然后使用該對(duì)象來添加各種動(dòng)畫組件：scale、rotate、translate和skew。你可以為CSS3動(dòng)畫定義一個(gè)名稱，或者直接在該對(duì)象上應(yīng)用頁(yè)面上的某個(gè)元素。

　　添加CSS3動(dòng)畫組件

　　scale

　　如上面所說的，你要使用scale、rotate、translate或skew方法來創(chuàng)建動(dòng)畫。所用這些方法都接收一定數(shù)量的參數(shù)，如from和to參數(shù)定義動(dòng)畫元素的開始和結(jié)束位置。所用這些方法都是可以鏈?zhǔn)骄幊痰摹?/p>

　　varbounce=newBounce();

　　bounce.scale({

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

　　to:{x:1,y:1}

　　});

　　上面代碼中的from和to參數(shù)定義了元素在X軸（寬度）和Y軸（高度）上scale的比例。這個(gè)例子使元素從50%的大小變化到100%的大小。

　　rotate

　　varbounce=newBounce();

　　bounce.rotate({

　　from:0,

　　to:90

　　});

　　上面代碼中的from和to參數(shù)定義了元素旋轉(zhuǎn)的度數(shù)。

　　總之，Bounce.js給大家簡(jiǎn)單的介紹了一些，希望大家多看看。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。