前言

又到了炎熱的7月，很久沒有更新技術文章了，原因是上月月底實習結束，從公司離職。然后最近在弄自己的項目和考駕照，為了下次公司的應聘做準備，送別了女朋友到外地，哩哩啦啦半個月把一切事情都辦妥后，還是靜下心來學習新技術和寫一寫技術文章，希望能繼續堅持下去吧。

JS動畫

隨著互聯網越來越豐富多樣，網頁端的美化和新技術層出不窮，作為一個網站的瀏覽者，更多吸引他們的除了保證網站的流暢之外還有各種炫酷的交互動效。

網頁的交互動效大概分為 css動畫，js動畫 。

JS動畫的優點

既然我們大概了解了這兩類動畫，那么我們來分析下他們不同的優點

1. css動畫 由于css3可以根據css屬性自定義動畫 所以這類動畫的優點就是不用進行計算和更改dom 會顯得非常流暢。
2. JS動畫 js動畫擁有強大的性能，并且優于css動畫的特點就是 既然是根據js來改變屬性值 所以沒有css那樣的局限性，可以實現更多的功能和動效，或許有人說js動畫某些庫會很慢，其實js動畫本質很快，只是jquery讓它慢了下來。因為有時候由于配合jquery使用，所以由于jquery本身的一些功能，所以在實現的時候就會顯得很慢。

velocity.js 使用方法

JS動畫的庫非常多，各有各的有點，比如jquery自帶的animate動畫還有 webGL,或者利用canvas，SVG等實現其他效果，本次來講的就是眾多庫中的其中一個 velocity.js 動畫庫。

velocity.js 既可以單獨用JavaScript使用，也可以配合jquery使用，使用方法(注意先將velocity.js下載好后在body標簽下引入，然后在新script標簽中書寫以下代碼) ：

//jquery方法 var $div = $('div')$div.velocity({屬性:值,屬性:值})//javascript 方法var oDiv = document.getElementById('div')oDiv.velocity({屬性:值,屬性:值})

這里需要注意得幾點：

1.里面的屬性不能加引號寫入，而后面的值如果有字符串則加引號，如果為整數則不用 比如 width:100 和 width："100px"
2.里面的屬性值不可一次傳入多個，比如在css中 padding:5px 5px 6px 5px;我們可以這樣傳入 但是在velocity中如果想傳入多個值則為 {paddingLeft：5, paddingRirght:5 省略}
3.里面的屬性值 如果是多個轉折的需要第二個首字母大寫 如上

velocity.js 詳細介紹

上面已經講到 需要改變的值作為對象傳入velocity的第一個參數，那么第二個參數就是 它的指定動畫選項包含：

+ duration 持續時間
+ easing 緩動方式
+ delay 延遲執行
+ loop 循環次數
+ begin 和 complete 回調函數
+ display(值與css相同，可設置為auto)

在講velocity指定動畫選項前 我們先說一下velocity支持的值: px em rem % vm vh 或者 利用運算符 *=2 表示當前值的2倍 或者 /=2 等運算方式

下面一個一個分析下指定動畫選項：

duration 持續時間

這個是代表動畫的持續時間默認值為毫秒(ms) 你可以這樣使用：

// 表示一秒內將透明度從1到0$div.velocity({opacity:0},{duration:1000})

也可以這樣使用:

// 效果相同$div.velocity({opacity:0},1000)

velocity也自定了三種持續方式：slow（600ms) ,normal（400ms）,fast(200ms),可根據自己實際需求使用

easing 緩動方式

這個是代表著動畫以何種方式進行變換：ease-in-out(逐加逐減),ease-in (先加速后勻速),dase-out (先勻速后減速)

也可以根據 三角函數緩動 "easeInOutSine" ，css貝塞爾曲線[0.17,0.67,0.83,0.67] 或者彈簧物理 [張力，摩擦力] 等值進行實現

delay 延遲執行

表示這個動畫延遲多少時間執行 默認單位毫秒(ms)

// 五秒后執行此動畫delay：5000

loop 循環次數

表示這個動畫需要的循環次數:

// 循環五次loop:5// 無限循環loop:true 

begin和complete回調函數

這兩個表示在動畫開始前和動畫結束后所執行的函數：

begin:function(){ somgthing... },complete:function(){ somgthing... }

其他功能：

velocity還有一些其他功能，這里就日后再說，比如：reverse(反轉)，scrolling(滾動)，color(顏色)，transform(變換 包含scale縮放 rotate旋轉 translation平移等)

結語

總之前端技術現在層出不窮，作為程序員的我們更應學習一些新的技術，既然熱愛，就永無止境，以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。