前言
又到了炎熱的7月，很久沒有更新技術(shù)文章了轻黑，原因是上月月底實(shí)習(xí)結(jié)束，從公司離職琴昆。然后最近在弄自己的項(xiàng)目和考駕照氓鄙，為了下次公司的應(yīng)聘做準(zhǔn)備，送別了女朋友到外地业舍，哩哩啦啦半個(gè)月把一切事情都辦妥后玖详，還是靜下心來學(xué)習(xí)新技術(shù)和寫一寫技術(shù)文章把介，希望能繼續(xù)堅(jiān)持下去吧。
JS動(dòng)畫
隨著互聯(lián)網(wǎng)越來越豐富多樣蟋座，網(wǎng)頁(yè)端的美化和新技術(shù)層出不窮拗踢，作為一個(gè)網(wǎng)站的瀏覽者，更多吸引他們的除了保證網(wǎng)站的流暢之外還有各種炫酷的交互動(dòng)效向臀。
網(wǎng)頁(yè)的交互動(dòng)效大概分為 css動(dòng)畫巢墅，js動(dòng)畫 。
JS動(dòng)畫的優(yōu)點(diǎn)
既然我們大概了解了這兩類動(dòng)畫券膀，那么我們來分析下他們不同的優(yōu)點(diǎn)
- css動(dòng)畫 由于css3可以根據(jù)css屬性自定義動(dòng)畫 所以這類動(dòng)畫的優(yōu)點(diǎn)就是不用進(jìn)行計(jì)算和更改dom 會(huì)顯得非常流暢君纫。
- JS動(dòng)畫 js動(dòng)畫擁有強(qiáng)大的性能，并且優(yōu)于css動(dòng)畫的特點(diǎn)就是 既然是根據(jù)js來改變屬性值 所以沒有css那樣的局限性芹彬，可以實(shí)現(xiàn)更多的功能和動(dòng)效蓄髓，或許有人說js動(dòng)畫某些庫(kù)會(huì)很慢，其實(shí)js動(dòng)畫本質(zhì)很快舒帮，只是jquery讓它慢了下來会喝。因?yàn)橛袝r(shí)候由于配合jquery使用，所以由于jquery本身的一些功能玩郊，所以在實(shí)現(xiàn)的時(shí)候就會(huì)顯得很慢肢执。
velocity.js 使用方法
JS動(dòng)畫的庫(kù)非常多，各有各的有點(diǎn)译红，比如jquery自帶的animate動(dòng)畫還有 webGL,或者利用canvas预茄，SVG等實(shí)現(xiàn)其他效果，本次來講的就是眾多庫(kù)中的其中一個(gè) velocity.js 動(dòng)畫庫(kù)侦厚。
velocity.js 既可以單獨(dú)用JavaScript使用耻陕，也可以配合jquery使用，使用方法(注意先將velocity.js下載好后在body標(biāo)簽下引入刨沦，然后在新script標(biāo)簽中書寫以下代碼) ：
//jquery方法
var $div = $('div')
$div.velocity({屬性:值,屬性:值})
//javascript 方法
var oDiv = document.getElementById('div')
oDiv.velocity({屬性:值,屬性:值})
這里需要注意得幾點(diǎn)：
1.里面的屬性不能加引號(hào)寫入淮蜈，而后面的值如果有字符串則加引號(hào)，如果為整數(shù)則不用 比如 width:100 和 width："100px"
2.里面的屬性值不可一次傳入多個(gè)已卷，比如在css中 padding:5px 5px 6px 5px;我們可以這樣傳入 但是在velocity中如果想傳入多個(gè)值則為 {paddingLeft：5, paddingRirght:5 省略}
3.里面的屬性值 如果是多個(gè)轉(zhuǎn)折的需要第二個(gè)首字母大寫 如上
velocity.js 詳細(xì)介紹
上面已經(jīng)講到 需要改變的值作為對(duì)象傳入velocity的第一個(gè)參數(shù)，那么第二個(gè)參數(shù)就是 它的指定動(dòng)畫選項(xiàng)包含：
+ duration 持續(xù)時(shí)間
+ easing 緩動(dòng)方式
+ delay 延遲執(zhí)行
+ loop 循環(huán)次數(shù)
+ begin 和 complete 回調(diào)函數(shù)
+ display(值與css相同淳蔼，可設(shè)置為auto)
在講velocity指定動(dòng)畫選項(xiàng)前 我們先說一下velocity支持的值: px em rem % vm vh 或者 利用運(yùn)算符 *=2 表示當(dāng)前值的2倍 或者 /=2 等運(yùn)算方式
下面一個(gè)一個(gè)分析下指定動(dòng)畫選項(xiàng)：
duration 持續(xù)時(shí)間
這個(gè)是代表動(dòng)畫的持續(xù)時(shí)間默認(rèn)值為毫秒(ms) 你可以這樣使用：
// 表示一秒內(nèi)將透明度從1到0
$div.velocity({opacity:0},{duration:1000})
也可以這樣使用:
// 效果相同
$div.velocity({opacity:0},1000)
velocity也自定了三種持續(xù)方式：slow（600ms) ,normal（400ms）,fast(200ms),可根據(jù)自己實(shí)際需求使用
easing 緩動(dòng)方式
這個(gè)是代表著動(dòng)畫以何種方式進(jìn)行變換：ease-in-out(逐加逐減),ease-in (先加速后勻速),dase-out (先勻速后減速)
也可以根據(jù) 三角函數(shù)緩動(dòng) "easeInOutSine" 侧蘸，css貝塞爾曲線[0.17,0.67,0.83,0.67] 或者彈簧物理 [張力，摩擦力] 等值進(jìn)行實(shí)現(xiàn)
delay 延遲執(zhí)行
表示這個(gè)動(dòng)畫延遲多少時(shí)間執(zhí)行 默認(rèn)單位毫秒(ms)
// 五秒后執(zhí)行此動(dòng)畫
delay：5000
loop 循環(huán)次數(shù)
表示這個(gè)動(dòng)畫需要的循環(huán)次數(shù):
// 循環(huán)五次
loop:5
// 無限循環(huán)
loop:true
begin和complete回調(diào)函數(shù)
這兩個(gè)表示在動(dòng)畫開始前和動(dòng)畫結(jié)束后所執(zhí)行的函數(shù)：
begin:function(){ somgthing... },complete:function(){ somgthing... }
其他功能：
velocity還有一些其他功能鹉梨，這里就日后再說讳癌，比如：reverse(反轉(zhuǎn))，scrolling(滾動(dòng))存皂，color(顏色)晌坤，transform(變換 包含scale縮放 rotate旋轉(zhuǎn) translation平移等)
結(jié)語(yǔ)
總之前端技術(shù)現(xiàn)在層出不窮逢艘，作為程序員的我們更應(yīng)學(xué)習(xí)一些新的技術(shù)，既然熱愛骤菠，就永無止境它改，我日后還會(huì)分享一些技術(shù)文章，純自己個(gè)人總結(jié)商乎，也當(dāng)做個(gè)人技術(shù)筆記央拖，如果喜歡，不妨關(guān)注鹉戚，哪里有錯(cuò)鲜戒，私信給我，我會(huì)即是更改抹凳，希望能同大家一同進(jìn)步遏餐。
