關于完美運動框架小bug的修復，附源碼
自己寫了一遍完美框架，發現很多重要的小細節（主要還是變量聲明的位置問題，即什么時候聲明）。然后，看了樓下 @赫克托耳 同學的評論，說一下關于他提出的問題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，我還沒有試
2015-10-20
不，這個對同時運動還是存在bug，flag會被修改為true，然后全部屬性并沒有到位
2016-02-01
還是不太懂，flag變成false后，怎么變回true，沒有這個語句在
2015-11-09
兄弟，我叫你聲哥
2015-10-22
給一段我稍加修改的代碼：
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]; } }2015-10-21
?????運動后
?
運動前
這樣就看出bug了吧
2015-10-20
你想想，每次進定時器的時候，你修改flag為true，我假設你設置的同時動畫有著三個屬性好了
{opacity:100，width:1000，height:400}
?if(json[attr]!=current){
? ? ? ? ? ? ? ? ? ?flag=false;//在某一屬性沒到設定值時，flag還是被設定為false，可是萬一opacity先到達設定值，也就不會進入這個修改操作，flag還是true，這是后面的清除定時器的操作依然會執行，所以width，heigt就不會打到你預想的值,也就是不會到1000
}
2015-10-20
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];
? ? }
}
2015-10-20
2015-10-20
才是正解