Rangka kerja gerakan sempurna Javascript (menganalisis kod baris demi baris, membolehkan anda memahami dengan mudah prinsip gerakan)_kemahiran javascript

Sebaik sahaja anda mendengar nama itu, anda akan tahu bahawa dengan rangka kerja ini, pada asasnya semua kesan dalam talian boleh dicapai. Malah, rangka kerja gerakan sebelumnya masih mempunyai had, iaitu, ia tidak boleh membenarkan beberapa nilai bergerak bersama.

Jadi bagaimana untuk menyelesaikan masalah ini? Mari kita lihat rangka kerja gerakan sebelumnya

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


function startMove(obj, attr, iTarget) {
  clearInterval(obj.time);
  obj.time = setInterval(function() {
    var cur = 0;

    if (attr == 'opacity') {
      cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
    } else {
      cur = parseInt(getStyle(obj, attr));
    }

    var speed = (iTarget - cur) / 6;

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

    if (cur == iTarget) {
      clearInterval(obj.time);
    } else {
      if (attr == 'opacity') {
        obj.style.filter = 'alpha(opacity=' + cur + speed + ')';
        obj.style.opacity = (cur + speed) / 100;
      } else {
        obj.style[attr] = cur + speed + 'px';
      }
    }
  }, 30);
}

Bagaimana untuk mengubah suainya? Ia sebenarnya sangat mudah Dalam rangka kerja yang lalu, anda hanya boleh lulus satu gaya dan satu nilai pada satu masa. Jadi sekarang tukar ini menjadi objek json. Saya percaya semua orang akan faham.

Apabila kita memanggilnya, ia adalah startMove(oDiv,{width:200,height:200}); Jika perlu, tambahkan fungsi panggil balik. Jadi mari kita lihat bagaimana kod itu diubah suai.

function startMove(obj, json, fnEnd)
{
  var MAX=18;
  //每次调用就只有一个定时器在工作(开始运动时关闭已有定时器)
  //并且关闭或者开启都是当前物体的定时器，已防止与页面上其他定时器的冲突，使每个定时器都互不干扰 
  clearInterval(obj.timer); 
  obj.timer=setInterval(function (){
    
    var bStop=true; // 假设：所有的值都已经到了
    
    for(var name in json)
    {
      var iTarget=json[name]; // 目标点
      
      //处理透明度，不能使用parseInt否则就为0了 
      
      if(name=='opacity')
      {
        
        // *100 会有误差 0000007 之类的 所以要用 Math.round() 会四舍五入
        var cur=Math.round(parseFloat(getStyle(obj, name))*100); 
      }
      else
      {
        var cur=parseInt(getStyle(obj, name)); // cur 当前移动的数值
      }
      
      var speed=(iTarget-cur)/5; // 物体运动的速度 数字越小动的越慢 /5 : 自定义的数字
      
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      
      if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;
      
      if(name=='opacity')
      {
        obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE
        obj.style.opacity=(cur+speed)/100; //ff chrome
      }
      else
      {
        obj.style[name]=cur+speed+'px';
      }
      
      // 某个值不等于目标点 
      if(cur!=iTarget)
      {
        bStop=false;
      }
    }
    
    // 都达到了目标点
    if(bStop)
    {
      clearInterval(obj.timer);
      
      if(fnEnd) //只有传了这个函数才去调用
      {
        fnEnd();
      }
    }
  }, 20);
}

Kenapa ada andaian bstop?

Malah, jika saya memanggil startMove(oDiv,{width:101,height:200}); lebar menjadi 101 dan pergerakan telah selesai, tetapi ketinggian belum dicapai, tetapi kita mungkin telah mematikan pemasa semasa. Pergerakan telah tamat, dan pepijat kes khas akan muncul. Terangkan:

Sebenarnya, pemasa perlu dimatikan apabila semua pergerakan selesai Sebaliknya, jika tiada pergerakan, maka matikan pemasa. Secara pemrograman, ia adalah untuk mentakrifkan nilai Boolean, yang benar pada mulanya, dengan mengandaikan

Semua nilai telah tiba. Jika terdapat nilai yang tidak sama dengan titik sasaran, bstop adalah palsu. Selepas keseluruhan kitaran tamat, jika bstop adalah benar, ini bermakna semua pergerakan telah selesai dan pemasa akan dimatikan pada masa ini.

Kemudian rangka kerja gerakan ini pada asasnya telah siap, boleh digunakan untuk css2 tetapi tidak boleh digunakan untuk css3.

Ringkasan:

Evolusi rangka kerja gerakan

rangka gerakan startMove(iTarget)
startMove(obj,iTarget) berbilang objek
startMove(obj,attr,iTarget) sebarang nilai
startMove(obj,attr,iTarget,fn) gerakan berantai
startMove(obj,json,fn) pergerakan sempurna

O(∩_∩)OTerima kasih ~