修改后的运动框架仍然在同时运行的时候存在bug~希望大家继续完善修改
来源：6-2 完美运动框架
hey自然
2015-09-10 18:11
//getStyle封装函数
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
//运动框架封装函数
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag=true;
for(var attr in json){
if(attr=='opacity'){
var curStyle= Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
var curStyle = parseInt(getStyle(obj,attr));
}
var rate = (json[attr]-curStyle)/6;
rate = rate>0?Math.ceil(rate):Math.floor(rate);
if(json[attr] != curStyle){
flag= false;
}
if(attr=='opacity'){
obj.style.opacity= (curStyle+rate)/100;
obj.style.filter= 'alpha(opacity='+(curStyle+rate)+')';
}else{
obj.style[attr] = curStyle+rate+'px';
}
if(flag){
if(fn){
fn()
}else{
clearInterval(obj.timer);
}
}
}
},30)
}参考了问答里大家的回复，这个运动框架已经比较完美~
写回答
关注
7回答
-
- 举个栗子233
- 2015-10-20 19:58:41
在评论看到你了，回调函数不能使用，我的解决办法如下：
【在每次时间间隔开始置flag为true】，就是下面代码的第6行。
// 完美运动框架 function startMove(obj,json,fn){// json={attr1:iT1,attr2:iT2} opacity:0.5 var flag = true; clearInterval(obj.timer); obj.timer = setInterval(function(){ flag = true;// 在这里把flag设一下true哦 var speed = 0, icur = null; for(var attr in json) { // 判断速度 if(attr == "opacity"){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur = parseInt(getStyle(obj,attr)); } speed = (json[attr] - icur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); // 判断临界值 if(icur != json[attr]){//有一个属性没达到要求iT，flag就等于false flag = false; } if(attr == "opacity"){ obj.style.filter = "alpha(opacity:"+(icur+speed)+")"; obj.style.opacity = (icur+speed)/100; }else{ obj.style[attr] = icur+speed+"px"; } // 设置值 if(flag){// 全部属性都达到要求iT拉 clearInterval(obj.timer); //alert(333); if(fn)fn(); //console.log("fn:"+fn);fn(); } //console.log("flag"+flag); } },30); } -
- Bang丶
- 2015-10-15 23:30:47
单个物体html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ margin-top: 20px; } ul,li{ list-style: none; } ul li{ width:200px; height: 100px; background: red; margin-bottom: 20px; filter:alpha('opacity':30); opacity: 0.3; border: 1px solid #ccc; } </style> <script type="text/javascript" src="js/move(json).js"></script> <script type="text/javascript"> window.onload = function(){ var Li = document.getElementById('li1'); Li.onmouseover = function(){ starMove(Li,{width:400,height:200,opacity:100}); } Li.onmouseout = function(){ starMove(Li,{height:100,width:200,opacity:30}); } } </script> </head> <body> <ul> <li id="li1"></li> </ul> </body> </html>多个物体html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ margin-top: 20px; } ul,li{ list-style: none; } ul li{ width:200px; height: 100px; background: red; margin-bottom: 20px; filter:alpha('opacity':30); opacity: 0.3; border: 1px solid #ccc; } </style> <script type="text/javascript" src="js/move(json)-Fix.js"></script> <script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for(var i=0; i<aLi.length;i++){ aLi[i].timer = null; aLi[i].timer2 = null; aLi[i].alpha = 30; aLi[i].onmouseover = function(){ var This=this; starMove(This,{width:400,height:200,opacity:100}); } aLi[i].onmouseout = function(){ var This=this; starMove(This,{height:100,width:200,opacity:30}); } } } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>move-json
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } function starMove(obj,json,fn){ var flag = true;//假设 clearInterval(obj.timer); obj.timer = setInterval(function(){ for(var attr in json){ //取当前值 var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur = parseInt(getStyle(obj,attr)); } var speed = (json[attr] - icur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(icur != json[attr]){ flag = false ; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:"+(icur+speed)+")'; obj.style.opacity = (icur+speed)/100; }else{ obj.style[attr] = icur + speed + 'px'; } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } } },30) }这个是我的，测试没问题。
-
- jmty
- 2015-10-11 23:44:36
if(flag){}应该放到for( in josn) {} 外边这样一楼就差不多没有大的毛病啦！
-
- jmty
- 2015-10-11 23:05:39
在IE中还是运行不了
-
- 东风破
- 2015-09-14 22:31:22
function startMove(obj,json,fn){ clearInterval(obj.timer); var icur = 0; obj.timer = setInterval(function(){ //flag的位置 var flag = true; for(var attr in json){ //第一步：取当前值 if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur = parseInt(getStyle(obj,attr)); } // 第二步：算速度 var speed = (json[attr]-icur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); //第三步:判断是否所有的元素都到达;如果不是则把flag设为false； if(icur != json[attr]){ flag = false; } if(attr == "opacity"){ obj.style.filter = "alpha(opacity:" + (icur+speed) + ")"; obj.style.opacity = (icur+speed)/100; }else{ obj.style[attr] = icur + speed + "px"; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30); } -
- L路_ZR
- 2015-09-14 19:47:58
首先要理解for in循环，他们返回属性名的顺序是不可预测的。然后你这个只要有一个满足，就会执行flag=true，这样还是一样不能同时运动。
-
- 东风破
- 2015-09-10 20:17:41
还是有问题，在同时运动的时候
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113923 学习 · 1443 问题
相似问题