关于完美运动框架小bug的修复，附源码
举个栗子233
2015-10-20 19:54
自己写了一遍完美框架，发现很多重要的小细节（主要还是变量声明的位置问题，即什么时候声明）。然后，看了楼下 @赫克托耳 同学的评论，说一下关于他提出的问题3：【无法执行回调函数的解决方法 】
1、我先用控制台在每次for-in循环的结尾输出了flag的值。发现，flag变为false后，没有使其变成true的触发语句啊（不知道老师为什么能执行，疑问）
2、也想过 @赫克托耳 同学提到的 if(json[attr] != curStyle){flag= false;}else{flag=true;} 这种。但这种肯定不对
3、于是想到在每次时间间隔开始置flag为true，
回调函数这一问题的解决方法，就是下面代码的第6行。
源码给大家了，大家最好自己敲一遍哦，反正我自己在敲得时候有太多问题了。
// 完美运动框架
function startMove(obj,json,fn){
var flag = true;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
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);
}为自己手动点赞233333，还有好像评论说在IE下有bug，我还没有试
9回答
-
- gritor
- 2015-10-20 20:21:22
不，这个对同时运动还是存在bug，flag会被修改为true，然后全部属性并没有到位
-
- 慕斯卡4106679
- 2016-02-01 18:15:43
还是不太懂，flag变成false后，怎么变回true，没有这个语句在
-
- 不见归途
- 2015-11-09 18:31:34
兄弟，我叫你声哥
-
- joker_0042
- 2015-10-22 14:04:03
给一段我稍加修改的代码：
function motion(obj,data,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ for(var attr in data){ var attrValue = getStyle(obj,attr), sValue = 0, speed = 0, stop = 0; if(attr=='opacity'){ sValue = Math.round(parseFloat(attrValue)*100); }else{ sValue = parseInt(attrValue); } speed = (data[attr]-sValue)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(sValue!=data[attr]){ stop = 0; }else{ stop++; } if(attr=='opacity'){ obj.style.filter = 'alpha(opacity:'+(sValue+speed)+')'; obj.style.opacity = (sValue+speed)/100; }else{ obj.style[attr] = sValue+speed+'px'; } if(stop==3){ clearInterval(obj.timer); if(fn){ fn(); } } } },20); } function getStyle(ele,attr){ if(ele.currentStyle){ //IE return ele.currentStyle[attr]; }else{ //非IE return getComputedStyle(ele,false)[attr]; } } -
- gritor
- 2015-10-21 12:48:08
运动后
运动前
这样就看出bug了吧
-
- gritor
- 2015-10-20 21:33:48
你想想，每次进定时器的时候，你修改flag为true，我假设你设置的同时动画有着三个属性好了
{opacity:100，width:1000，height:400}
if(json[attr]!=current){
flag=false;//在某一属性没到设定值时，flag还是被设定为false，可是万一opacity先到达设定值，也就不会进入这个修改操作，flag还是true，这是后面的清除定时器的操作依然会执行，所以width，heigt就不会打到你预想的值,也就是不会到1000
}
-
- gritor
- 2015-10-20 20:56:52
function startMove(obj,json,FnextChange){
var speed=0;
var flag=true;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
flag=true;
var current=0;//当前属性值
if(attr=='opacity'){
current=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
current= parseInt(getStyle(obj,attr));
}
//计算速度
speed=(json[attr]-current)/15;
speed=speed<0?Math.floor(speed):Math.ceil(speed);
if(json[attr]!=current){
flag=false;
}
//此种设置offsetWidth=border+padding+width,设置内外边距的时候会出现错误
// obj.style.width=obj.offsetWidth+speed+'px';
//把属性写到html元素内联里边的话，可以使用obj.style.*获取元素的属性
// obj.style.width=parseInt(obj.style.width)+speed+'px';
//也可以通过api来获取元素属性
// ie下
// obj.currentStyle[attr];
//火狐下
// getComputedStyle(obj,false)[attr];
if(attr=='opacity'){
obj.style.opacity=(current+speed)/100;
obj.style.filter='alpha:(opacity:'+current+speed+')';
}else{
obj.style[attr]=current+speed+'px';
}
if(flag){
// clearInterval(obj.timer);
if(FnextChange){
FnextChange();
}
}
}
// obj.style.fontSize=parseInt(getStyle(obj,'font-size'))+1+'px';
},30);
}
function getStyle (obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
-
- gritor
- 2015-10-20 20:30:40
最后没去定时器，效果是实现了，但感觉这样不大好 -
- gritor
- 2015-10-20 20:04:55
才是正解
JS动画效果
113917 学习 · 1502 问题
相似问题