Aujourd'hui, j'ai simplement appris l'animation js motion, enregistré mon expérience et l'ai partagée avec tout le monde.
Voici les résultats que j'ai compilés.
Point de connaissance 1 : Animation rapide.
1. La première étape consiste à implémenter une animation de mouvement rapide et à encapsuler une fonction. La connaissance utilisée est setInterval(function(){
.
oDiv.style.left=oDiv.offsetLeft 10 "px";
},30).
Quant à la raison pour laquelle offsetLeft est utilisé ici, je l'ai spécifiquement recherché et les informations utiles que j'ai obtenues sont :
La similitude entre a.offsetLeft et left est qu'ils représentent la position gauche du nœud enfant par rapport au nœud parent.
b. Mais left peut être lu et écrit, tandis que offsetLeft est en lecture seule ;
c. Et offsetLeft n'a pas d'unité, et il n'y a pas de px derrière lors de l'obtention de la position du nœud enfant.
Voici quelques connaissances supplémentaires, grâce à ce blogueur,
http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/.
2. Arrêtez le nœud en mouvement. Ici, nous utilisons l'instruction if pour faire une vérification. Si offsetLeft==0, clearInterval (timer), le timer ici doit être initialisé = null à l'avance, puis attribuer l'animation de mouvement précédente. à cela.
3. Il y a un problème ici. Si le mouvement est à nouveau déclenché avant la fin du mouvement, la vitesse du mouvement sera accumulée ici, tant que clearInterval (timer) est utilisé avant le début du mouvement entier, ça ira.
4. Définissez l'effet de déplacement et de retrait, ainsi que les paramètres du mouvement. L'un est la vitesse et l'autre est la position cible iTarget. Nous avons constaté que la vitesse peut également être jugée par la position d'ITarget. donc un seul paramètre est nécessaire.
Point de connaissance 2 : Dégradé de transparence
1. En fait, c'est presque la même chose qu'avant, sauf que la valeur d'ITarget est la transparence, et le processus consiste toujours à effacer le minuteur puis à ouvrir un minuteur pour juger, etc.
2. Définissez un paramètre alpha = transparence Notez que le timer doit s'écrire comme ceci :
alpha = vitesse；
oDiv.style.filter='alpha(opacity:' alpha ')'; //C'est une méthode très importante, veuillez noter qu'elle est écrite comme ceci
oDiv.style.opacity=alpha/100; //Attention à ne pas oublier de diviser par 100
3. Les styles ci-dessus sont tous des styles en ligne.
Point de connaissance 3 : Mouvement tampon
1. Le mouvement tampon signifie que plus la distance est grande, plus la vitesse est grande et plus la distance est petite, plus la vitesse est petite, c'est-à-dire que la vitesse est liée à la distance.
2. D'après la déclaration ci-dessus, redéfinissez la vitesse La vitesse était de 0 au début, mais maintenant :
var speed=iTarget-oDiv.offsetLeft;
Redéfinir la minuterie :
oDiv.style.left=oDiv.offsetLeft vitesse 'px';
À ce stade, nous avons constaté que la vitesse était trop élevée, nous pouvons faire ceci :
var speed=(iTarget-oDiv.offsetLeft)/10;
3. Il y aura un problème sérieux à ce moment-là. Parce que l'unité minimale de l'écran est px, il y aura un iTarget dont la valeur finale à gauche est une décimale et non la cible. Cela peut être résolu par jugement. est présenté ici. floor(), qui arrondit, et Math.ceil(), qui arrondit. Après avoir défini la vitesse on écrit ainsi :
speed=vitesse>0?Math.ceil(vitesse):Math.floor(vitesse);
De cette façon, il est totalement garanti que les vitesses sont toutes des nombres entiers et sont toutes 0 à la valeur critique.
Point de connaissance 4 : Mouvement multi-objets
1. Récupérez d'abord tous les objets et formez un tableau, puis utilisez une boucle for pour le faire (comme cette méthode est classique !), ajoutez des événements de nœud dans la boucle for et utilisez-la pour remplacer le nœud actuel dans la fonction, par exemple : startMove(this, iTarget), lors de la définition d'une fonction startMove(obj, iTarget).
2. Lorsque vous prenez la largeur actuelle offsetWidth, vous devez utiliser la valeur de obj.
3. Lorsque la souris se déplace très rapidement, la largeur du nœud ne peut pas être restaurée à son état d'origine. En effet, le minuteur est un minuteur commun à tout le monde. Le nœud suivant a effacé le minuteur avant le retour du nœud précédent. à son état d'origine. La solution est d'ajouter un index à chaque nœud, ce qui consiste à ajouter aDiv[i].timer=null; dans la boucle for ci-dessus, puis à remplacer timer par obj.timer dans la fonction définie. Par conséquent, nous devons prêter attention au fait que quelque chose va arriver au minuteur partagé.
4. Dans le mouvement de la transparence, l'alpha remplace la vitesse, mais même si la minuterie n'est pas partagée, des problèmes surgiront dans le mouvement de plusieurs objets. En effet, l'alpha est partagé, ce qui amènera chaque objet à se déchirer. La solution est de l'utiliser comme Assign alpha à chaque nœud de la boucle for comme timer.
Résumé : Pour résoudre les conflits, initialisez ou personnalisez.
Point de connaissance 5. Obtenir des styles
1. Dans la minuterie qui modifie la largeur du nœud (grand pour entrer, petit pour supprimer), si vous ajoutez une bordure au nœud, elle sera plus petite que le nœud cible lors de l'entrée et plus grande que le nœud cible lors du déplacement. Faites attention à la bordure de la barre de défilement de remplissage en largeur (barre de défilement), la raison est donc que chaque décalage augmentera la bordure*2- (la valeur diminue à chaque fois dans la minuterie).
2. La façon de résoudre le problème ci-dessus est d'écrire la largeur en ligne et d'utiliser parseInt(oDiv.style.width) au lieu de offsetLeft. Cependant, il ne peut pas toujours être écrit en ligne, nous définissons donc une fonction pour obtenir le. style de lien :
fonction getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //ie navigateur
}
autre{
return getComputerStyle(obj,false)[attr]; //Autres navigateurs
}
}
3. Pour font-size, il n'y a qu'une seule façon d'écrire fontSize en js.
Point de connaissance 6 : Toute valeur d'attribut
1. Tous les types de décalage auront de petits bugs. Vous devez utiliser la fonction getStyle. Cette fonction est souvent utilisée avec parseInt() et est généralement enregistrée dans une variable.
2. Lorsque vous écrivez style.width, vous pouvez également écrire style['width'].
3. Pour ajuster les valeurs d'attribut de plusieurs objets, vous pouvez encapsuler le style en tant que paramètre, de sorte que la fonction d'attribut multi-objet inclut les trois valeurs d'attribut(obj, attr, iTarget).
4. Le cadre de mouvement ci-dessus ne convient pas aux changements de transparence, car la transparence est décimale, pour deux raisons, la première est parseInt, la seconde est attr=...px, ici nous pouvons utiliser une interprétation Use if pour traiter transparence séparément, remplacez parseInt par parseFloat et supprimez px.
5. L'ordinateur lui-même a un bug. 0,07*100 n'est pas égal à 7, nous introduisons donc une fonction appelée Math.round(), qui est une valeur arrondie.
Point de connaissance 7 : Mouvement en chaîne
1. Présentez le framework move.js.
2. Passez une fonction de rappel fn(), utilisez if pour juger, s'il y a fn(), puis exécutez fn().
Point de connaissance 8 : Mouvement simultané
1. Si vous écrivez deux fonctions de mouvement pour contrôler un mouvement simultané, une couverture de fonction se produira.
2. Utilisez le point de connaissance de json. La boucle de json utilise for (i dans json), et les paramètres de la fonction de mouvement sont obj, json, fn.
3. Il n'y a plus de valeur iTarget, elle est remplacée par json[attr].
Au moment où j’écris ceci, c’est complètement terminé. J’espère que vous l’aimerez tous. J'espère également qu'il sera utile à tout le monde d'apprendre l'animation de mouvement js.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
