Un exemple simple d'implémentation de l'effet d'animation de la fonction jquery animate() dans js natif

Après un mois de stage en entreprise, je me suis progressivement familiarisé avec CSS et HTML. J'ai commencé à étudier js ces derniers jours. Aujourd'hui, j'ai écrit une fonction jquery animate en js. Après l'avoir testée, les performances étaient. d'accord. Personnellement, je pense que jquery n'est pas tout-puissant. Parce qu'il s'agit d'un framework, certaines choses sont relativement mal écrites, tout comme la fonction animer, il n'y a pas beaucoup de paramètres facultatifs et parfois il ne permet pas d'obtenir l'effet souhaité.

La partie commentée est destinée aux tests. Le processus d'écriture de code n'est pas très fluide, car je n'utilise pas js avec beaucoup de prudence, je connais généralement la méthode et je l'ai déjà utilisée, mais quand je l'utilise. attendez Lorsque vous voulez vraiment implémenter la fonction d'animation, si vous écrivez mal les détails, vous risquez d'être confus.

Il y a plusieurs paramètres dans la fonction pour expliquer,

•obj, l'objet de la fonction

•json, une paire de valeurs, sous la forme {attr: "value", attr: "value"}, fait ici référence à l'attribut de mouvement de l'objet à animer

•intervalle, l'intervalle pour chaque changement, ce qui change ici c'est que la valeur de l'attribut de l'objet

•sp, la valeur de transformation Vitesse, pour que l'animation ait un effet tampon au lieu d'une simple vitesse constante (sp est 1)

·fn, fonction de rappel, le comportement après l'exécution de l'animation

Le code est relativement simple, juste avec Il y a plusieurs détails auxquels il faut faire attention. Voici un rappel :

• Les propriétés de l'objet n'ont pas besoin d'être déclarées directement, donc le. la première phrase de la fonction clearInterval(obj.timer); ne signalera pas d'erreur.

• Une minuterie doit être ajoutée à chaque objet, sinon ils s'influenceront mutuellement. Le résultat du partage d'une minuterie est que le mouvement de plusieurs objets de la minuterie sera bloqué.

•son format de données : lors du parcours des propriétés d'animation d'un objet, vous avez besoin de icur != json[arr] pour déterminer si chaque propriété a atteint la valeur cible. La fonction de l'indicateur est d'empêcher clearInterval(obj.timer) d'effacer le minuteur lorsque l'un des attributs atteint pour la première fois la valeur cible. Par conséquent, les autres attributs d'animation n'atteignent pas la valeur cible. Par conséquent, la valeur de l'indicateur est initialisée à true lors de chaque parcours. Tant qu'un objet qui n'atteint pas l'attribut cible est rencontré, l'indicateur est défini sur false jusqu'à ce que tous les attributs de l'objet atteignent la valeur cible et que le minuteur soit effacé.

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

La fonction de cette phrase est d'arrondir la valeur de l'attribut, car la valeur de l'attribut sauf l'opacité Pas de décimales.

• Faites attention à l'objet animé lors de son appel en dernier. Lorsque vous utilisez une boucle for, vous ne pouvez pas utiliser la forme arr[i] de manière arbitraire, surtout lorsque la valeur de i est devenue la valeur maximale lors de l'utilisation de boucles imbriquées. .

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

Méthode d'appel :

<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>

L'exemple simple ci-dessus de js natif réalisant l'effet d'animation de la fonction jquery animate() est partagé par l'éditeur avec tout le monde L'intégralité du contenu est ici, j'espère qu'il pourra donner une référence à chacun, et j'espère aussi que tout le monde soutiendra le site Web PHP chinois.

Pour des exemples plus simples de js natifs implémentant l'effet d'animation de la fonction jquery animate(), veuillez faire attention au site Web PHP chinois pour les articles connexes !