运动

运动

//obj 操作的元素

//json 参数为 要操作的属性和目标值   键--属性    值--目标值

//callback 回调函数

var flag;//开关变量  当值为true时，表示 所有的动作都执行完毕 ，可以关掉定时器 ，也可以进入下一个动作

function startMove(obj,json,callback){//attr表示要操作的属性
        
    clearInterval(obj.timer);
    
    obj.timer = setInterval(function(){
        flag = true;
        
        var current = 0;
        
        for(var attr in json){
            
            if( attr =="opacity" ){//操作透明度
                //获取透明度的样式值
                current =parseFloat( getStyle(obj,attr) )*100;
                
            }else if( attr == "zIndex" ){
                current =parseInt( getStyle(obj,attr)  ) ;//接收当前元素的样式值
            }else{
                current =parseInt( getStyle(obj,attr)  ) ;//接收当前元素的样式值
            }
            
            
            var speed = (json[attr] - current)/10;
            
            
            speed = speed>0?Math.ceil(speed) : Math.floor(speed);
            
            
            if( current != json[attr] ){//动作完成后的条件  
                flag = false;//当目标值和当前的样式值 不相等时  ， 将开关变量值关闭 false
            }
                
            //定时器开启时  不停的改变元素的样式
            if( attr == "opacity" ){
                obj.style.opacity = (current+speed)/100;
            }else if( attr=="zIndex" ){
                obj.style.zIndex = json[attr];
            }else{
                obj.style[attr] = current + speed + "px";
            }
    
        }
        
        //循环结束后判断flag的值，当值为true时，表示 所有的动作都执行完毕 ，可以关掉定时器 ，也可以进入下一个动作
        if( flag ){
            clearInterval(obj.timer);
            //上一个动作完成后 就开启下一个动作的执行    调用callback
            //判断 callback是否存在 存在就调用
            if( callback ){
                callback();
            }
        }
        
    },30)
}
 

匀速运动---缓冲运动---多物体运动---链式运动---完美运动

 

匀速运动

速度不变：

注意 ： 

1、频繁操作事件 需要先将定时器清除处理  防止加速运动

2、速度确定 ：不能由用户提供  在函数体内部解决

    目标值 - 运动物体的left值 > 0 ? 正速度 :  负速度

 

缓冲运动

缓冲运动 ： 速度可变 

 

原理 ： 速度确定

var speed = (target - obj.offsetLeft)/10;

speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );

 

 

　　sport1.js:

//支持 缓冲 + 多物体
// obj ： 运动的对象
// attr : 运动的样式
// target ： 目标值

function startMove(obj,attr,target){
clearInterval( obj.timer );
obj.timer = setInterval( function(){
var current = parseInt( getStyle( obj , attr ) );
var speed = (target - current)/10;
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
if( target == current ){
clearInterval( obj.timer )
}else{
obj.style[attr] = current + speed + "px";
}
},30 )
}

 

sport2.js:

//支持 缓冲 + 多物体
// obj ： 运动的对象
// attr : 运动的样式
// target ： 目标值

function startMove(obj,attr,target){
clearInterval( obj.timer );
obj.timer = setInterval( function(){
//获取实际样式值
var current = 0;
if( attr == "opacity" ){
current = getStyle( obj , attr )*100;
}else{
current = parseInt( getStyle( obj , attr ) );
}
//获取速度
var speed = (target - current)/10;
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
//判断结束条件 并设置样式
if( target == current ){
clearInterval( obj.timer )
}else{
if( attr == "opacity" ){
obj.style[attr] = (current + speed)/100;
}else{
obj.style[attr] = current + speed + "px";
}
}
},30 )
} 

sport3.js:

//支持 缓冲 + 多物体
// obj ： 运动的对象
// attr : 运动的样式
// target ： 目标值
//callback ：代表一个功能 一个函数 当一个函数作为参数时，这样的函数叫做回调函数
//回调 ：回头再调用

function startMove(obj,attr,target,callback){
clearInterval( obj.timer );
obj.timer = setInterval( function(){
//获取实际样式值
var current = 0;
if( attr == "opacity" ){
current = getStyle( obj , attr )*100;
}else{
current = parseInt( getStyle( obj , attr ) );
}
//获取速度
var speed = (target - current)/10;
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
//判断结束条件 并设置样式
if( target == current ){
clearInterval( obj.timer );
//上一个动作完成了 开始进入到下一个动作
//下一个动作不确定 此处有一个功能 是可变的
if( callback ){//如果用户传递了该参数 就执行下一个动作
callback();
}
}else{
if( attr == "opacity" ){
obj.style[attr] = (current + speed)/100;
}else{
obj.style[attr] = current + speed + "px";
}
}
},30 )
}