运动
//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 )
}