物体运动框架
2017-05-31 19:01
218 查看
要有封装的思想,把一系列操作不重复的地方提取出来,作为参数传入,并且复杂动作分解成几个小的运动
多物体运动,变量不能公用,会造成资源抢夺
缓冲运动时,与目标距离不同,速度也变化,并且会有小数所以要速度判定
定时器部分
获取要变化的样式
同时发生动作
用到json键值对
多物体运动,变量不能公用,会造成资源抢夺
缓冲运动时,与目标距离不同,速度也变化,并且会有小数所以要速度判定
function(){ var aLi =document.getElementsByTagName("li"); for(var i = 0;i<aLi.length;i++){ aLi[i].timer = null;//多物体运动,变量不能公用,会因为造成资源抢夺 aLi[i].alpha = 30; aLi[i].onmouseover = function(){ startMove(this,100); } aLi[i].onmouseout= function(){ startMove(this,30); } } } function startMove(obj,iTarget){ clearInterval(obj.timer); var speed; obj.timer = setInterval(function(){ speed = (iTarget-obj.alpha)/10; //由目标和现值决定正负值,注意要取整,当距离小于10的时候,除了之后会是小数,这样会造成最后距离偏差 //凡是有变速运动都要有这个速度的判定 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(iTarget == obj.alpha){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter = "alpha(opacity:"+obj.alpha+")"; obj.style.opacity = obj.alpha / 100; } },30) }
定时器部分
timer = setInterval (function(){ var speed = 0; if(oDiv.offsetLeft > iTarget ){ //如果当前offsetLeft 大于目标值,即0-->-200那么速度是负的 speed = -10; }else{ //如果当前offsetLeft 小于目标值,即-200-->0那么速度是正的 speed = 10; } if(oDiv.offsetLeft == iTarget){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft + speed+"px"; } },20);
获取要变化的样式
function getStyle(obj,attr){ //解决offset样式属性的bug if(obj.currentStyle){ return obj.currentStyle[attr];//IE获得其属性 }else { return getComputedStyle(obj,false)[attr];//火狐获得其属性 } } //return 的是字符串,要转换成整型parseInt()
运动框架
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>链式动画</title> <style> *{ margin:0; padding:0; } li { width:200px; height:100px; margin-bottom:10px; background-color:yellow; border:2px solid blue; opacity:0.3; filter:alpha(opacity:30);/*IE环境*/ } </style> <script src="startMove.js"></script> <script> window.onload = function(){ var aLi =document.getElementById("li1"); //移入 aLi.onmouseover = function(){ startMove(aLi,'width',400,function(){ startMove(aLi,'height',200,function(){ //console.log(this);//此时是window调用 startMove(aLi,'opacity',100); }); }); } //移出 aLi.onmouseout = function(){ startMove(aLi,'opacity',30,function(){ startMove(aLi,'height',100,function(){ startMove(aLi,'width',200); }); }); } } </script> </head> <body> <ul> <li id="li1"></li> </ul> </body> </html>
function startMove(obj,attr,iTarget,fn){ //获取参数 clearInterval(obj.timer); var speed,icurr; obj.timer = setInterval(function(){ if(attr == 'opacity'){ icurr =Math.round(parseFloat(getStyle(obj,attr))*100);//透明度是小数,计算机的取值,用Math.round()四舍五入 }else{ icurr = parseInt(getStyle(obj,attr));//获取当前属性 } //计算速度 //凡是有变速运动都要有这个速度的判定 //speed = (iTarget-obj.offsetWidth)/10; speed = (iTarget - icurr)/10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //判定动画结束 if( icurr == iTarget){ //if(iTarget == obj.offsetWidth){ clearInterval(obj.timer); if(fn){ fn(); } }else{ //动画过程 if(attr == 'opacity'){ obj.style.filter = "alpha(opacity:"+(icurr+speed)+")";//IE obj.style.opacity = (icurr+speed)/100;//非IE }else{ obj.style[attr] = icurr + speed +"px"; } //obj.style.width = obj.offsetWidth + speed +"px"; } },30) } //获取当前参数的属性值 function getStyle(obj,attr){ //解决offset样式属性的bug if(obj.currentStyle){ return obj.currentStyle[attr];//IE获得其属性 }else { return getComputedStyle(obj,false)[attr];//火狐获得其属性 } }
同时发生动作
用到json键值对
<script> window.onload = function(){ var aLi =document.getElementById("li1"); //移入 aLi.onmouseover = function(){ startMove(aLi,{width:201,height:200,opacity:100}); } //移出 aLi.onmouseout = function(){ startMove(aLi,{width:200,height:100,opacity:30}); } } </script>
**move.js:** //startMove(obj,{attr1:iTarget,attr2:iTarget},fn); function startMove(obj,json,fn){ //1.获取参数 clearInterval(obj.timer); var speed,icurr; obj.timer = setInterval(function(){ var flag = true; for(var attr in json){ if(attr == 'opacity'){ icurr =Math.round(parseFloat(getStyle(obj,attr))*100);//透明度是小数,计算机的取值,用Math.round()四舍五入 }else{ icurr = parseInt(getStyle(obj,attr));//获取当前属性 } //2.计算速度 //凡是有变速运动都要有这个速度的判定 //speed = (iTarget-obj.offsetWidth)/10; speed = (json[attr] - icurr)/10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //3.判定动画是否全部执行结束 if( icurr != json[attr]){ flag = false;//不是,就赋值false } //动画过程 if(attr == 'opacity'){ obj.style.filter = "alpha(opacity:"+(icurr+speed)+")";//IE obj.style.opacity = (icurr+speed)/100;//非IE }else{ obj.style[attr] = icurr + speed +"px"; } //obj.style.width = obj.offsetWidth + speed +"px"; } if(flag){ //如果全部完成 clearInterval(obj.timer); if(fn){ fn(); } } },30) } //获取当前参数的属性值 function getStyle(obj,attr){ //解决offset样式属性的bug if(obj.currentStyle){ return obj.currentStyle[attr];//IE获得其属性 }else { return getComputedStyle(obj,false)[attr];//火狐获得其属性 } }
相关文章推荐
- js实现多物体运动框架并兼容各浏览器
- js实现多物体运动框架并兼容各浏览器
- js运动技术--多物体运动框架(变宽、变高、改变字体、改变border、透明度)以及替换offset的使用
- 多物体运动框架
- 多物体运动框架
- (42)JS运动之多物体框架--多个div变宽
- js多物体不同运动框架(标签样式)
- JavaScript运动框架 多物体任意值运动(三)
- Javascript运动概念2——多物体运动框架
- js-多物体运动框架
- 多物体任意值运动框架
- (42)JS运动之多物体框架--多个div变宽
- js-完美物体运动框架
- js实现多物体不同运动框架
- js完美多物体运动框架(缓冲运动)
- javascript运动框架多物体运动---1
- 关于多物体运动框架的函数
- javascript 多物体任意运动框架
- JS运动之多物体框架--多个div变宽
- Js运动动画系列9--多物体同时运动-封装运动框架