tutoriel d'utilisation de la minuterie d'animation js

Cette fois, je vais vous apporter un tutoriel sur la façon d'utiliser le minuteur d'animation js. Quelles sont les précautions lors de l'utilisation du minuteur d'animation js. Voici un cas pratique, jetons un coup d'œil.

D'une manière générale : toutes les présentations visuelles modifiées via js sont appelées animations ; par exemple, des boutons, des liens et d'autres éléments Commentaires interactifs.

Au sens étroit : l'effet d'animation visuelle produit en appelant continuellement des fonctions js via des minuteries pour modifier les attributs des éléments.

Timer

Timer est la technologie de base de l'animation JavaScript ;

setTimeout(), setInterval() sont bien connus et souvent utilisés dans le passé ; >Habituellement, ils font quelque chose d'auxiliaire et de cerise sur le gâteau ;

Les personnes prudentes peuvent constater un phénomène : lors du passage d'autres onglets à une page avec une animation en boucle, il y aura un décalage et un changement d'image rapide

Exemple 2 :

setTimeout(function(a,b){ 
 console.log(a+b); 
},1000,1,1)；

Mécanisme de fonctionnement

var a = 0;
function foo(){
 console.log(this.a);
};
var obj = {
 a : 2,
 foo:foo
}
setTimeout(obj.foo,100);

Raison : Rejoindre la file d'attente et bloquer l'exécution.

setTimeout(function(){ 
 console.log(1); 
}); 
console.log(0);

Légende setInterval :

L'existence est raisonnable

définie par l'utilisateur

Exemple 3 :

Exemple 4 :

<p id="myp" style="height: 100px;width: 100px;background-color: pink;"></p>
<script>
myp.onclick = function(){
 setTimeout(function(){
  alert(0);
 })
}
document.onclick = function(){
 alert(1);
}
</script>

Comprendre requestAnimationFrame

<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
 setTimeout(function(){
  myInput.value = myInput.value.toUpperCase();
 });
}
</script>

raf est simple et compatible

Je crois que vous avez lu cet article. Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

window.requestAnimFrame = (function(){ 
 return window.requestAnimationFrame || 
   window.webkitRequestAnimationFrame ||   
   window.mozRequestAnimationFrame || 
   function( callback ){  
    window.setTimeout(callback, 1000 / 60);
    };
  })();

JS utilise des expressions régulières pour déterminer la date de naissance

Explication détaillée de la méthode de formatage du filtre Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!