2012年4月11日 星期三

調整 jQuery 動畫效果的更新頻率

前陣子在開發平板應用時
由於需要仿製Ipad上的主頁面
讓螢幕上排滿App 圖示的情況下
還必須要滑動換頁
公司的裝置在降頻且使用舊版webkit核心的瀏覽器下
顯得有些許頓挫感
後來想到可以針對jQuery動畫效果的部份去調整

這時候得手動調整
jQuery.fx.interval

下面開始範例

範例DEMO on jsfiddle

我們先建立基本的HTML

<!DOCTYPE html>
<html>
<body>
  <p><input type="button" value="Run"/></p>
  <div class="box"></div>
</body>
</html>


這裡我們建了一個box及啟動按鈕

設定一下css

讓box有個顏色跟基本大小
這邊要注意的是
要做動畫效果必須要設定position為相對或是絕對定位


.box 
    width:50px
    height:30px;
    background-color:#000;
    positionrelative;        
}


再來就是重頭戲了:p
我們來建立按鈕事件
讓box每按一次移動 100px



jQuery.fx.interval = 18;

$("input").click(function(){
    $("div").animate({left:'+=100px'}, 500);
});​


jQuery.fx.interval 的型態是數字, 預設值為13毫秒 
我們為了調整更新的效率
將它改為18

雖然只是小小的5毫秒
卻還是讓原本在平板上有頓挫感的程式
變成咻咻咻的流暢動畫
不過數字不能調太大
不然因為更新頻率間隔太長
反而會造成動畫效果不佳的情形