Ein einfaches Beispiel für die Implementierung des Animationseffekts der JQuery-Funktion animate() in nativem JS

Nach einem Monat Praktikum im Unternehmen habe ich mich in den letzten Tagen nach und nach mit CSS und HTML vertraut gemacht. Heute habe ich eine JQuery-Animationsfunktion geschrieben Okay. Ich persönlich bin der Meinung, dass jquery nicht allmächtig ist. Da es sich um ein Framework handelt, sind einige Dinge relativ schwierig zu schreiben. Es gibt nicht viele optionale Parameter und manchmal erzielt es möglicherweise nicht den gewünschten Effekt.

Der kommentierte Teil dient zum Testen. Der Prozess des Schreibens von Code ist nicht sehr reibungslos, da ich die Methode im Allgemeinen nicht sehr sorgfältig verwende und sie bereits verwendet habe Warten Sie, wenn Sie die Animationsfunktion wirklich implementieren möchten und die Details falsch schreiben, kann es zu Verwirrung kommen.

Es gibt mehrere Parameter in der Funktion, um zu erklären,

•obj, das Objekt der Funktion

•json, ein Wertepaar, in der Form {attr: „Wert“, attr: „Wert“}, bezieht sich hier auf das Bewegungsattribut des zu animierenden Objekts

•Intervall, das Intervall für jede Änderung. Was sich hier ändert, ist der Attributwert des Objekts

•sp, die Werttransformationsgeschwindigkeit, damit die Animation einen Puffereffekt statt nur einer konstanten Geschwindigkeit hat (sp ist 1)

·fn, Callback-Funktion, das Verhalten nach der Ausführung der Animation

Der Code ist relativ einfach, nur mit Es gibt einige Details, auf die geachtet werden muss:

• Die Eigenschaften des Objekts müssen nicht direkt deklariert werden Der erste Satz der Funktion „clearInterval(obj.timer)“ meldet keinen Fehler.

• Zu jedem Objekt muss ein Timer hinzugefügt werden, andernfalls beeinflussen sie sich gegenseitig. Das Ergebnis der gemeinsamen Nutzung eines Timers ist, dass die Bewegung mehrerer Objekte des Timers hängen bleibt.

•son-Datenformat: Beim Durchlaufen der Animationseigenschaften eines Objekts benötigen Sie icur != json[arr], um festzustellen, ob jede Eigenschaft den Zielwert erreicht hat. Die Funktion des Flags besteht darin, zu verhindern, dass clearInterval(obj.timer) den Timer löscht, wenn eines der Attribute zum ersten Mal den Zielwert erreicht. Infolgedessen erreichen andere Animationsattribute den Zielwert nicht. Daher wird der Flag-Wert bei jedem Durchlauf auf „true“ initialisiert, solange ein Objekt angetroffen wird, das das Zielattribut nicht erreicht, wird das Flag auf „false“ gesetzt, bis alle Attribute des Objekts den Zielwert erreichen und der Timer gelöscht wird.

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

Die Funktion dieses Satzes besteht darin, den Attributwert zu runden, da der Attributwert außer Opazität Keine Dezimalstellen.

• Achten Sie beim letzten Aufruf auf das animierte Objekt. Wenn Sie eine for-Schleife verwenden, können Sie die arr[i]-Form nicht beliebig verwenden, insbesondere wenn der Wert von i bei Verwendung verschachtelter Schleifen den Maximalwert erreicht hat .

js

function animate(obj, json, interval, sp, fn) {
  clearInterval(obj.timer);
  //var k = 0;
  //var j = 0;
  function getStyle(obj, arr) {
    if(obj.currentStyle){
      return obj.currentStyle[arr];  //针对ie
    } else {
      return document.defaultView.getComputedStyle(obj, null)[arr]; 
    }
  }
  obj.timer = setInterval(function(){
    //j ++;
    var flag = true;
    for(var arr in json) {
      var icur = 0;
      //k++;
      if(arr == "opacity") {
        icur = Math.round(parseFloat(getStyle(obj, arr))*100);
      } else {
        icur = parseInt(getStyle(obj, arr));
      }
      var speed = (json[arr] - icur) * sp;
      speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
      if(icur != json[arr]){
        flag = false;
      } 
      if(arr == "opacity"){
        obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";
        obj.style.opacity = (icur + speed)/100;
      }else {
        obj.style[arr] = icur + speed + "px";
      }
      //console.log(j + "," + arr +":"+ flag);
    }
 
    if(flag){
      clearInterval(obj.timer);
      //console.log(j + ":" + flag); 
      //console.log("k = " + k);
      //console.log("j = " + j);
      //console.log("DONE");
      if(fn){
        fn();
      }
    }
  },interval);
}

Aufrufmethode:

<script>
  var move = document.getElementById("move").getElementsByTagName("li");
  for(var i = 0; i < move.length; i ++){
    move[i].onmouseover = function(){
      var _this = this;
      animate(_this, {width: 500, height: 200},10, 0.01, function(){
        animate(_this, {width: 300, height: 200},10, 0.01);
      });
 
    }
  }
 
</script>

Das obige einfache Beispiel für natives js, das den Animationseffekt der JQuery-Funktion animate() realisiert, wird vom Editor mit allen geteilt Der gesamte Inhalt ist hier, ich hoffe, er kann jedem als Referenz dienen und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere einfache Beispiele für native JS, die den Animationseffekt der JQuery-Funktion animate() implementieren, finden Sie auf der chinesischen PHP-Website für verwandte Artikel!