javascript運動系列第四篇——抖動 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　在運動系列中，前面分別介紹了勻速運動、變速運動和曲線運動。下面介紹一種特殊的運動形式——抖動

原理介紹

　　抖動其實是往復運動的一種特殊形式，只不過往復運動是一種無摩擦力的無限運動，且以速度為參照依據；而抖動以位置作為參照依據，最終停在起始點

　　在網頁中最常見的一種抖動效果應該是窗口抖動提示了

　　抖動元素從起始點開始，先向右移動最大距離len，然后移動到對稱的左邊位置；然后再向右移動稍微小一點的距離，再移動到對稱的左邊位置；以此循環，最終元素停止在起始點

代碼實現

　　抖動在代碼實現上，無非就是通過定時器，每隔一段時間讓left或top值進行變化

　　在運動實現中，有兩種距離變化的思路

思路一

div.style.left = div.offsetLeft + value;

　　每次都獲取元素的當前樣式，再與變化的value值進行運算

思路二

left = div.offsetLeft;
......
div.style.left = left + value;

　　在定時器開啟之前，獲取元素的初始樣式，再與變化的value值進行運算

　　從抖動實現上來說，使用第二種方法，把距離變化完全交給value值變化來實現較為簡單

　　所以，代碼實現的關鍵就是了解value是如何變化的

　　假設最遠距離為目標target，同方向的距離間隔為步長step。如果用數字更直觀的表示，value的值類似于4、-4、2、-2、0。所以還需要一個變量dir來控制起始抖動方向，定時器每運動一次都要對dir進行更改

//定時器開啟前的變量聲明
dir = 1;
step = 0;
left = div.offsetLeft
//定時器里面的代碼
value = dir*(target - step);
if(step >= target){
    step = target
}
div.style.left = left + value + 'px';
if(dir === -1){
    step++;    
}
dir = -dir;

　　將抖動效果封裝為shakeMove.js

function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
} 
function shakeMove(json){
    //聲明要進行抖動的元素
    var obj = json.obj;
    //聲明元素抖動的最遠距離
    var target = json.target;
    //默認值為20
    target = Number(target) || 20;
    //聲明元素的變化樣式
    var attr = json.attr;
    //默認為'left' 
    attr = attr || 'left'; 
    //聲明元素的起始抖動方向
    var dir = json.dir;
    //默認為'1'，表示開始先向右抖動
    dir = Number(dir) || '1';
    //聲明元素每次抖動的變化幅度
    var stepValue = json.stepValue;
    stepValue = Number(stepValue) || 2;
    //聲明回調函數 
    var fn = json.fn;
    //聲明步長step
    var step = 0;
    //保存樣式初始值
    var attrValue = parseFloat(getCSS(obj,attr));
    //聲明參照值value
    var value;
    //清除定時器
    if(obj.timer){return;}
    //開啟定時器
    obj.timer = setInterval(function(){
        //抖動核心代碼
        value = dir*(target - step);
        //當步長值大于等于最大距離值target時
        if(step >= target){
            step = target
        }
        //更新樣式值
        obj.style[attr] = attrValue + value + 'px';
        //當元素到達起始點時，停止定時器
        if(step == target){
            clearInterval(obj.timer);
            obj.timer = 0;
            //設置回調函數
            fn && fn.call(obj);    
        }  
        //如果此時為反向運動，則步長值變化
        if(dir === -1){
            step = step + stepValue;    
        }
        //改變方向
        dir = -dir; 

    },50);        
}

實例應用

　　下面利用封裝的shakeMove來實現一些簡單的抖動應用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test{
    height: 50px;
    width: 50px;
    position: absolute;
    top: 50px;
}    
</style>
</head>
<body>
<div id="box">
    <div class="test" style="left:10px;background:lightblue"></div>
    <div class="test" style="left:70px;background:lightgreen"></div>
    <div class="test" style="left:130px;background:pink"></div>
    <div class="test" style="left:190px;background:lightcoral"></div>
    <div class="test" style="left:250px;background:orange"></div>
</div>
<script src="http://files.cnblogs.com/files/xiaohuochai/shakeMove.js"></script>
<script>
var aDiv = box.getElementsByTagName('div');
for(var i = 0; i < aDiv.length; i++){
    aDiv[i].onmouseover = function(){
        shakeMove({obj:this,attr:'top'});
    }
}
</script>
</body>
</html>