聊聊JS動畫庫 Velocity.js的使用

這篇文章主要介紹了聊聊JS動畫庫 Velocity.js的使用，現在分享給大家，也給大家做個參考。

前言

又到了炎熱的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 $p = $('p')
$p.velocity({属性:值,属性:值})
//javascript 方法
var op = document.getElementById('p')
op.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
$p.velocity({opacity:0},{duration:1000})

也可以這樣使用:

// 效果相同
$p.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平移等)

上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

JS實作將連結產生二維碼並轉為圖片的方法

#

基於vue1和vue2取得dom元素的方法

#nodejs mongodb aggregate級聯查詢操作範例

##

以上是聊聊JS動畫庫 Velocity.js的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！