Javascript Perfect Motion Framework (Analyse des Codes Zeile für Zeile, damit Sie die Prinzipien der Bewegung leicht verstehen können)_Javascript-Kenntnisse

Sobald Sie den Namen hören, wissen Sie, dass mit diesem Framework grundsätzlich alle Online-Effekte erzielt werden können. Tatsächlich hatte das vorherige Bewegungsframework noch Einschränkungen, das heißt, es konnte nicht zulassen, dass sich mehrere Werte gleichzeitig bewegen.

Wie kann man dieses Problem lösen? Werfen wir zunächst einen Blick auf den vorherigen Bewegungsrahmen

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);
}

Wie kann ich es ändern? Eigentlich ist es sehr einfach. Im bisherigen Framework konnte man jeweils nur einen Stil und einen Wert übergeben. Ändern Sie diese nun in ein JSON-Objekt. Ich glaube, jeder wird es verstehen.

Wenn wir es aufrufen, ist es startMove(oDiv,{width:200,height:200}); Fügen Sie bei Bedarf eine Rückruffunktion hinzu. Schauen wir uns also an, wie der Code geändert wird.

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);
}

Warum gibt es die Annahme von bstop?

In der Tat, wenn ich startMove(oDiv,{width:101,height:200}); aktuellen Timer. Die Bewegung ist beendet und unter besonderen Umständen wird ein Fehler auftreten. Erklären Sie:

Eigentlich muss der Timer ausgeschaltet werden, nachdem alle Bewegungen abgeschlossen sind. Wenn jedoch kein Fehler vorliegt, schalten Sie den Timer aus. Das Programm soll einen booleschen Wert definieren, der zu Beginn wahr ist, vorausgesetzt

Alle Werte sind angekommen. Wenn ein Wert ungleich dem Zielpunkt ist, ist bstop falsch. Wenn bstop nach dem Ende des gesamten Zyklus wahr ist, bedeutet dies, dass alle Bewegungen abgeschlossen sind und der Timer zu diesem Zeitpunkt ausgeschaltet wird.

Dann ist dieses Bewegungsframework im Grunde fertig und gilt für CSS2, aber nicht für CSS3.

Zusammenfassung:

Die Entwicklung des Bewegungsrahmens

startMove(iTarget) Bewegungsrahmen
startMove(obj,iTarget) mehrere Objekte
startMove(obj,attr,iTarget) beliebiger Wert
startMove(obj,attr,iTarget,fn) Kettenbewegung
startMove(obj,json,fn) perfekte Bewegung

O(∩_∩)ODanke ~