Aujourd'hui, j'ai brièvement appris JS Sports Animation, enregistré mes expériences et les ai partagées avec tout le monde.
Voici les résultats que j'ai réglés.
Point de connaissance 1: Animation de vitesse.
1. Premièrement, la première étape consiste à implémenter l'animation de mouvement de vitesse, encapsuler une fonction, la connaissance utilisée est setInterval (function () {
La copie de code est la suivante:
odiv.style.left = odiv.offsetleft + 10 + "px";
}, 30).
Concernant pourquoi Offsetleft est utilisé ici, je suis spécialement Baidu, et les informations utiles que j'ai obtenues est:
A.offsetleft et gauche sont les mêmes que représenter la position gauche du nœud enfant par rapport au nœud parent.
né Mais à gauche est à la fois lisible et écrivain, tandis que Offsetleft est en lecture seule;
c. Et Offsetleft n'a pas d'unité, et il ne contient pas PX lors de l'obtention de la position du nœud enfant.
J'étends d'autres connaissances ici. Merci à ce blogueur, http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/.
2. Laissez le nœud en mouvement s'arrêter. Ici, nous utilisons l'instruction IF pour vérifier. Si OffsetLeft == 0, ClearInterval (Timer), le minuteur ici doit initialiser = null à l'avance, puis lui attribuer l'animation de mouvement précédente.
3. Il y a un problème ici. Si le mouvement est à nouveau déclenché avant la fin du mouvement, la vitesse du mouvement s'accumulera. Ici, tant que le mouvement entier commence, ClearInterval (Timer) est suffisant.
4. Définissez l'effet de déménagement et de suppression et définir des paramètres pour le 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 de l'Itarget, donc un seul paramètre est nécessaire.
Point de connaissance 2: gradient de transparence
1. En fait, il est similaire à tout à l'heure, sauf que la valeur d'Itarget est transparente, et que le processus consiste à effacer la minuterie et à activer une autre minuterie pour porter des jugements, etc.
2. Définissez un paramètre alpha = transparence, notez que la minuterie doit être écrite comme ceci:
La copie de code est la suivante:
alpha + = vitesse;
odiv.style.filter = 'alpha (opacité:' + alpha + ')'; // Ceci est une méthode très importante, veuillez noter qu'elle est écrite comme celle-ci
odiv.style.opacity = alpha / 100; // veille à ne pas oublier de diviser par 100
3. Ce qui précède sont tous des styles en ligne.
Point de connaissance trois: 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, la vitesse est liée à la distance.
2. Selon la déclaration ci-dessus, la vitesse est redéfinie. La vitesse est 0 au début, et maintenant:
La copie de code est la suivante:
Var Speed = itarget-odiv.offsetLeft;
Redéfinir la minuterie:
La copie de code est la suivante:
odiv.style.left = odiv.offsetleft + speed + 'px';
À ce moment, nous avons constaté que la vitesse était trop élevée, donc nous pouvions le faire comme ceci:
La copie de code est la suivante:
Var Speed = (itarget-odiv.offsetleft) / 10;
3. Il y aura un grave problème pour le moment. Étant donné que l'unité minimale de l'écran est PX, la valeur gauche finale apparaîtra comme une décimale et l'ITarget ne sera pas la cible. Il peut être résolu par le jugement. Math.floor () devrait être présenté ici, qui s'arrête, et Math.Ceil () apparaîtra également, ce qui s'arrête. Après avoir défini la vitesse, nous écrivons ceci:
La copie de code est la suivante:
Speed = Speed> 0? Math.Ceil (Speed): Math.floor (Speed);
Cela garantira que la vitesse est un entier et qu'elle est 0 dans la valeur critique.
Point de connaissance 4: mouvement multi-objet
1. Obtenez d'abord tous les objets, formez un tableau, puis utilisez une boucle pour le faire (comment cette méthode classique!), Ajoutez des événements de nœud dans la boucle FOR et utilisez-le pour remplacer le nœud actuel dans la fonction, par exemple: startmove (this, itarget), startmove (obj, itarget) lors de la définition de la fonction.
2. Lorsque vous prenez la largeur de largeur actuelle, vous devez utiliser la valeur d'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, la minuterie est une minuterie que tout le monde utilise. Le nœud suivant a effacé la minuterie avant que le nœud précédent ne revienne à son état d'origine. La solution consiste à ajouter un index à chaque nœud, qui consiste à ajouter adiv [i] .timer = null à ce qui précède pour la boucle; puis définissez la fonction pour remplacer la minuterie par obj.timer. Par conséquent, nous devons prêter attention au fait que quelque chose se produit lors du partage de la minuterie.
4. Dans le mouvement de transparence, Alpha remplace la vitesse, mais même si le minuteur n'est pas partagé, le mouvement de plusieurs objets aura des problèmes. En effet, l'alpha est commun, ce qui fait que chaque objet se déchire. La solution consiste à affecter l'alpha à chaque nœud dans la boucle pour une minuterie.
Résumé: Résolution des problèmes de conflit, initialisez ou personnalisez.
Point de connaissance 5. Obtenez le style
1. Dans une minuterie qui modifie la largeur du nœud (déplacer en grand, retirer petit), si vous ajoutez une bordure au nœud, il est plus petit que le nœud cible lorsqu'il est déplacé et plus grand que le nœud cible lorsqu'il est déplacé. Faites attention à la largeur + padding + barre de défilement (barre de défilement) + bordure, de sorte que la raison en est que chaque décalage augmentera la bordure * 2- (la valeur de chaque diminution de la minuterie).
2. La solution au problème ci-dessus est d'écrire une largeur dans la ligne et d'utiliser ParseInt (odiv.style.width) au lieu de décalage, mais il ne peut pas toujours être écrit dans la ligne, nous définissons donc une fonction pour obtenir le style de chaîne:
La copie de code est la suivante:
function getStyle (obj, att) {
if (obj.currentStyle) {
return obj.currentStyle [att]; // IE Browser
}
autre{
return getComputerTyle (obj, false) [att]; // d'autres navigateurs
}
}
3. Pour la taille de la police, il n'y a que la méthode d'écriture de FonTSize dans JS.
Point de connaissance 6: toute valeur d'attribut
1. Tous les décalages auront de petits bugs. Utilisez la fonction GetStyle. Cette fonction est souvent utilisée avec ParseInt () et est généralement enregistrée avec des variables.
2. Lorsque vous écrivez Style.Width, vous pouvez également l'écrire sous forme de style [«largeur»].
3. Pour l'ajustement de la valeur d'attribut de plusieurs objets, vous pouvez encapsuler le style en tant que paramètre, de sorte que les fonctions des attributs de plusieurs objets incluent les trois valeurs d'attribut (obj, att, itarget).
4. Le cadre de mouvement ci-dessus ne convient pas aux changements de transparence, car la transparence est tout décimal. Pour deux raisons, le premier est Parseint, et le second est att = ... + px. Ici, nous pouvons utiliser une interprétation IF pour traiter la transparence séparément, remplacer Parseint par Parsefloat et supprimer PX.
5. L'ordinateur lui-même a un bug, 0,07 * 100 ne correspond pas à 7, donc nous introduisons une fonction qui est math.round (), qui est une valeur arrondie.
Point de connaissance 7: mouvement de la chaîne
1. introducez le framework Move.js.
2. Passez dans une fonction de rappel fn () et utilisez si pour juger. S'il y a fn (), alors exécutez fn ().
Point de connaissance 8: Exercice simultané
1. Si deux fonctions de mouvement sont écrites pour contrôler le mouvement simultané, l'écrasement des fonctions se produira.
2. Utilisez JSON comme point de connaissance. La boucle JSON utilise pour (I en JSON), et les paramètres de la fonction de mouvement sont OBJ, JSON et FN.
3. Il n'y a aucune valeur d'Itarget, et elle est remplacée par JSON [att].
Après avoir écrit ceci, c'est complètement fini. J'espère que tout le monde pourra l'aimer. J'espère également qu'il sera utile à tout le monde d'apprendre JS Sports Animation.