關(guān)于完美運(yùn)動(dòng)框架小bug的修復(fù)，附源碼
自己寫(xiě)了一遍完美框架，發(fā)現(xiàn)很多重要的小細(xì)節(jié)（主要還是變量聲明的位置問(wèn)題，即什么時(shí)候聲明）。然后，看了樓下 @赫克托耳 同學(xué)的評(píng)論，說(shuō)一下關(guān)于他提出的問(wèn)題3：【無(wú)法執(zhí)行回調(diào)函數(shù)的解決方法 】
1、我先用控制臺(tái)在每次for-in循環(huán)的結(jié)尾輸出了flag的值。發(fā)現(xiàn)，flag變?yōu)閒alse后，沒(méi)有使其變成true的觸發(fā)語(yǔ)句?。ú恢览蠋煘槭裁茨軋?zhí)行，疑問(wèn)）
2、也想過(guò) @赫克托耳 同學(xué)提到的 if(json[attr] != curStyle){flag= false;}else{flag=true;} 這種。但這種肯定不對(duì)?
3、于是想到在每次時(shí)間間隔開(kāi)始置flag為true，
???? 回調(diào)函數(shù)這一問(wèn)題的解決方法，就是下面代碼的第6行。
????源碼給大家了，大家最好自己敲一遍哦，反正我自己在敲得時(shí)候有太多問(wèn)題了。
//?完美運(yùn)動(dòng)框架
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]){// 有一個(gè)屬性沒(méi)達(dá)到要求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){// 全部屬性都達(dá)到要求iT拉
????clearInterval(obj.timer);
????//alert(333);
????if(fn)fn();
????//console.log("fn:"+fn);fn();
}
//console.log("flag"+flag);
},30);
}為自己手動(dòng)點(diǎn)贊233333，還有好像評(píng)論說(shuō)在IE下有bug，我還沒(méi)有試
2015-10-20
不，這個(gè)對(duì)同時(shí)運(yùn)動(dòng)還是存在bug，flag會(huì)被修改為true，然后全部屬性并沒(méi)有到位
2016-02-01
還是不太懂，flag變成false后，怎么變回true，沒(méi)有這個(gè)語(yǔ)句在
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
?????運(yùn)動(dòng)后
?
運(yùn)動(dòng)前
這樣就看出bug了吧
2015-10-20
你想想，每次進(jìn)定時(shí)器的時(shí)候，你修改flag為true，我假設(shè)你設(shè)置的同時(shí)動(dòng)畫(huà)有著三個(gè)屬性好了
{opacity:100，width:1000，height:400}
?if(json[attr]!=current){
? ? ? ? ? ? ? ? ? ?flag=false;//在某一屬性沒(méi)到設(shè)定值時(shí)，flag還是被設(shè)定為false，可是萬(wàn)一opacity先到達(dá)設(shè)定值，也就不會(huì)進(jìn)入這個(gè)修改操作，flag還是true，這是后面的清除定時(shí)器的操作依然會(huì)執(zhí)行，所以width，heigt就不會(huì)打到你預(yù)想的值,也就是不會(huì)到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;//當(dāng)前屬性值
? ? ? ? ? ? ? ? if(attr=='opacity'){
? ? ? ? ? ? ? ? ? ? current=Math.round(parseFloat(getStyle(obj,attr))*100);
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? current= parseInt(getStyle(obj,attr));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //計(jì)算速度
? ? ? ? ? ? ? ? speed=(json[attr]-current)/15;
? ? ? ? ? ? ? ? speed=speed<0?Math.floor(speed):Math.ceil(speed);
? ? ? ? ? ? ? ? if(json[attr]!=current){
? ? ? ? ? ? ? ? ? ?flag=false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? //此種設(shè)置offsetWidth=border+padding+width,設(shè)置內(nèi)外邊距的時(shí)候會(huì)出現(xiàn)錯(cuò)誤
? ? ? ? ? ? ? ? // obj.style.width=obj.offsetWidth+speed+'px';
? ? ? ? ? ? ? ? //把屬性寫(xiě)到html元素內(nèi)聯(lián)里邊的話，可以使用obj.style.*獲取元素的屬性
? ? ? ? ? ? ? ? ? ? // obj.style.width=parseInt(obj.style.width)+speed+'px';
? ? ? ? ? ? ? ? //也可以通過(guò)api來(lái)獲取元素屬性
? ? ? ? ? ? ? ? ? ? // 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
才是正解