运动函数以及抖动函数的封装

1、运动函数

考虑一下问题：有一目标处于left值为10px位置处，需要运动到left位1000px位置处。

var oDiv = document.getElementById('div1');

var timer = null;

timer = setInterval(function(){

oDiv.style.left = parseInt(getStyle(oDiv, 'left')) + 10 + 'px';

if( parseInt(getStyle(oDiv, 'left'))>=1000 ){
clearInterval(timer);
oDiv.style.left = 1000 + 'px';
}

},30)

为了防止到达目标点后的抖动幅度过大问题，可以将目标点判断放在外面：

var oDiv = document.getElementById('div1');

var timer = null;

timer = setInterval(function(){

var iSpeed = parseInt(getStyle(oDiv, 'left')) + 10;

if(iSpeed>=1000){
iSpeed = 1000;
}

oDiv.style.left = iSpeed + 'px';

if ( ispeed == 1000 ) {
clearInterval(timer );
}

},30)

为了后续封装函数的方便，避免全局变量，可以将定时器设为自定义属性管理：

var oDiv = document.getElementById('div1');

oDiv.timer = setInterval(function(){

var iSpeed = parseInt(getStyle(oDiv, 'left')) + 10;

if(iSpeed>=1000){
iSpeed = 1000;
}

oDiv.style.left = iSpeed + 'px';

if ( ispeed == 1000 ) {
clearInterval( oDiv.timer );
}

},30)

接下来对函数进行抽象：

需要考虑改变的因素有目标体、目标点、变化属性、变化速度，已经到达目标值得后续操作（回调函数）

function doMove ( obj, attr, dir, target, endFn ) {

dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;  //判断方向

clearInterval( obj.timer );

obj.timer = setInterval(function () {

var speed = parseInt(getStyle( obj, attr )) + dir;          // 步长

if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
speed = target;
}

obj.style[attr] = speed + 'px';

if ( speed == target ) {
clearInterval( obj.timer );

endFn && endFn();             //回调函数存在则执行
}

}, 30);
}

2、抖动函数

function shake ( obj, attr, endFn ) {
var pos = parseInt( getStyle(obj, attr) );
var arr = [];           // 20, -20, 18, -18 ..... 0
var num = 0;

for ( var i=20; i>0; i-=2 ) {
arr.push( i, -i );
}
arr.push(0);

clearInterval( obj.shake );
obj.shake = setInterval(function (){
obj.style[attr] = pos + arr[num] + 'px';
num++;
if ( num === arr.length ) {
clearInterval( obj.shake );
endFn && endFn();
}
}, 50);
}