標籤:-o 其他 uil 計算 首字母 項目 ati 執行 個人
前言
又到了炎熱的7月,很久沒有更新技術文章了,原因是上月月底實習結束,從公司離職。然後最近在弄自己的項目和考駕照,為了下次公司的應聘做準備,送別了女朋友到外地,哩哩啦啦半個月把一切事情都辦妥後,還是靜下心來學習新技術和寫一寫技術文章,希望能繼續堅持下去吧。
JS動畫
隨著互連網越來越豐富多樣,網頁端的美化和新技術層出不窮,作為一個網站的瀏覽者,更多吸引他們的除了保證網站的流暢之外還有各種炫酷的互動動效。
網頁的互動動效大概分為 css動畫
,js動畫
。
JS動畫的優點
既然我們大概瞭解了這兩類動畫,那麼我們來分析下他們不同的優點
- css動畫 由於css3可以根據css屬性自訂動畫 所以這類動畫的優點就是不用進行計算和更改dom 會顯得非常流暢。
- 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平移
等)
結語
總之前端技術現在層出不窮,作為程式員的我們更應學習一些新的技術,既然熱愛,就永無止境,我日後還會分享一些技術文章,純自己個人總結,也當做個人技術筆記,如果喜歡,不妨關注,哪裡有錯,私信給我,我會即是更改,希望能同大家一同進步。
聊聊JS動畫庫:Velocity.js