自分でjs運動の枠組みのいくつかの心得を実現します

以前jsのアニメーションの効果を学んで、その時他の人の実現の構想を見て、自分が理解したと思って、それからあまり管理していないと思って、感じはあまりにも簡単で、しかし今回した1つのプロジェクトの中でアニメーションの効果を使って、もし自分がすべて手書きで少し面倒だと思って、そこで自分でこの完璧な運動の枠組みを実現することを考えて、しかし実現する過程の中で発見して、実はそんなに簡単ではありませんて、完璧な運動の枠組みを書くそれでは彼は各种の属性を変えることに适して、それでは彼のパラメータは2つが必要で、1つは変える要素で、2つ目は変える属性で、多くの属性が同时に运动することを実现するために、私达の2番目のパラメータはJSONフォーマットのデータで、3番目のパラメータは1つのコールバック関数で、私达が目标の値に达した后に、実行する関数で、以下のように见ます

function startMove (obj, json, fn) {
}

コードで要素の属性値を取得するには、このような関数が必要です.

function getStyle (obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

ここでは

obj.currentStyle getComputedStyle          

張鑫旭が書いた要素CSS値を取得するgetComputedStyleの方法はこの文章をよく知っていて、見た後にとても良い理解があって、私は大体このような意味でgetComputedStyleが1つの要素のすべてのスタイルを取得することができることを理解します;要素のstyleは要素のstyle属性の中の値しか取得できません.要素のスタイルが外部に接続されている場合は、取得できません.
CurrentStyleはieが出した産物で、getComputedStyleと同じ役割を果たしています.
次に振り返ってみると、私たちはフレームワークを動かして、まず普通の他の人のコードに行きます.

function startMove(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function (){
        var bStop = true;  

        //         ——         
        for(var attr in json) {

            //1.     
            var iCur = 0;

            if(attr == 'opacity') {
               iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
            } else {
               iCur = parseInt(getStyle(obj, attr));
            }

            //2.   
            var iSpeed = (json[attr]-iCur)/8;

            iSpeed = iSpeed > 0?Math.ceil(iSpeed):Math.floor(iSpeed);

           //3.    
           if(iCur!=json[attr]) {
               bStop=false;
            }

           if(attr=='opacity') {
               obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
               obj.style.opacity=(iCur+iSpeed)/100;
           } else {
               obj.style[attr]=iCur+iSpeed+'px';
           }

        }

        if(bStop) {
           clearInterval(obj.timer);

           if(fn){
              fn();
           }
        }

    }, 30)
}

使ってみると、問題はありませんが、要素が変わる属性がopacityであれば、0-100の間の値を伝えなければなりません.これは私たちが普段書いているopacityの値とは違いますので、自分で書きました.

function startMove (obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var bStop = true,
            cur,
            speed;

        for (var attr in json) {
        if (attr === "opacity") {
            cur = parseInt((getStyle(obj, attr))*100);
         // json[attr] cur       
        speed =  (parseInt(json[attr]*100) - cur)/8;
    } else {
            cur = parseInt(getStyle(obj, attr));
            speed =  (json[attr] - cur)/8;
    }

    speed = speed > 0?Math.ceil(speed):Math.floor(speed);

        if (cur != json[attr]) {
            bStop = false;
        }   

        if (attr === "opacity") {
            obj.style.opacity = (cur + speed)/100;
        } else {
            obj.style[attr] = cur + speed + "px";
        }                   
    }

    if(bStop) {
        clearInterval(obj.timer);
        if (fn) {
            fn();
        }
    }
  }, 1000);
}

私自身が書いたこの属性がopacityであれば0から1の間の値に書くことができます.ここで重要なのはアニメーションの現在の値に速度値を加えることです.必ずある段階で目標値に等しくなければなりません.私はコードの中でその行のために注釈をしました.この目標を実現するために、私たちは速度値の時に小数の存在があるので、必ず彼を整数に変えなければなりません.このようにして最終的に1になるまでターゲット要素の値を正確に制御し、ターゲット要素の値は整数でなければならない.整数でなければ上記のコードのopacityの値*100をしなければならない.そして、整数の段階に戻る.しかし、これはあまり完璧ではない.opacityの値の小数位が2桁より大きいと、ターゲット値に完璧に到達しない可能性がある.
見た人に教えてほしい.