Il y aura une animation parabolique pour ajouter des produits au panier à Tmall, indiquant à l'utilisateur que l'opération est réussie et l'emplacement du panier. Des effets similaires sont nécessaires dans l'entreprise. Enregistrez la note de mise en œuvre du processus d'implémentation et démarrez la démo.
Au début, je ne pensais pas utiliser une fonction de parabole pour le faire, et j'avais oublié qu'il y avait une telle fonction. Je pensais que la parabole a essentiellement une vitesse vers les directions droite et ascendante (en ce qui concerne la démo ci-dessus), la vitesse vers la droite est uniforme, la vitesse vers la direction ascendante diminue, puis la direction inverse est augmentée. Les valeurs gauche et supérieure de l'élément changent avec le temps, et la trajectoire de mouvement de l'élément est Parabole. Cette idée n'est pas universelle et la mise en œuvre est relativement compliquée, j'ai donc abandonné.
Plus tard, j'ai fait référence à la mise en œuvre par Zhang Xinxu de la fonction parabolique et à l'amélioration du quai du fou, et je l'ai soudainement réalisé.
Je reviendrai à nouveau l'idée. La fonction parabolique y = a * x * x + b * x + c, où a n'est pas égal à 0, a, b et c sont des constantes. X et Y sont les coordonnées de la parabole qui passent à travers; A détermine la direction d'ouverture de la parabole, avec l'ouverture d'un> 0 vers le haut et l'ouverture d'un <0 vers le bas. Il est évident que l'ouverture de la parabole du TMALL est à la baisse et détermine également la taille de l'ouverture. Plus la valeur est petite, plus l'ouverture est grande, plus la parabole est plus fluide et vice versa. Par conséquent, la valeur de A peut être personnalisée, ce qui équivaut à connaître deux coordonnées (le point de départ et le point final assis, c'est-à-dire l'élément gauche et les valeurs supérieures). Trouver deux nombres inconnus, vous pouvez apprendre à utiliser les mathématiques de l'école secondaire, des équations quadratiques binaires.
y1 = a * x1 * x1 + b * x1 + c
y2 = a * x2 * x2 + b * x2 + c
A est connu, substituant deux coordonnées connues [x1, y1] [x2, y2] peut entraîner les valeurs de B et C, et la relation correspondante entre x et y est présente.
Que l'ouverture de la parabole soit vers le haut ou vers le bas, la vitesse de l'élément se déplaçant dans la direction horizontale reste inchangée, c'est-à-dire que la valeur gauche change à une vitesse constante. Vous pouvez définir le temps de mouvement parabole t. La vitesse de l'élément dans la direction horizontale est SpeedX = (x2 - x1) / t. Définissez une minuterie, qui est exécutée toutes les 30 ms. La valeur de gauche après chaque fois que le temporisateur est exécuté est le courant x = speedx * La minuterie a été exécutée. Remplacez la fonction y = a * x * x + b * x + c pour obtenir la valeur supérieure. Étant donné que tout ce calcul est basé sur la traduction de la coordonnée du point de départ à l'origine (le point final est également traduit en conséquence), lors de la définition enfin de la valeur gauche / supérieure de l'élément mobile, la valeur gauche / supérieure initiale de l'élément de point de départ doit être ajouté. Pour plus de détails, veuillez vérifier le code de démonstration en F12.
Code principal:
/ ** * JS Parabola Animation * @param {[Object]} Origin [Élément de démarrage] * @param {[objet]} Target [Élément de point cible] * @param {[objet]} élément [élément à déplacer] * @param {[numéro]} a [Parabola Radian] * @param {numéro]} Time [Animation Execution Time L'exécution de Parabola est terminée] * / var parabola = fonction (config) {var b = 0, interval = 15, tempor = null, x1, y1, x2, y2, originx, originy, diffx, diffy; this.config = config || {}; // Point de démarrage this.origin = $ (this.config.origin) || null; // Point final this.target = $ (this.config.target) || null; // élément de mouvement this.element = $ (this.config.element) || null; // courbe radian this.a = this.config.a || 0,004; // temps de mouvement (ms) this.time = this.config.time || 1000; this.init = function () {x1 = this.origin.offset (). Left; y1 = this.origin.offset (). top; x2 = this.target.offset (). Left; y2 = this.target.offset (). top; OriginX = x1; originy = y1; diffx = x2-x1; diffy = y2-y1, speedx = diffx / this.time; // Il est connu que selon la fonction de parabole y = a * x * x + b * x + c, le point de départ de la parabole est traduit par l'origine des coordonnées [0, 0], et le point final est traduit en conséquence. Ensuite, la parabole passe par l'origine [0, 0] et obtient c = 0; // Une fois le point final traduit, il est obtenu: y2-y1 = a * (x2 - x1) * (x2 - x1) + b * (x2 - x1) // c'est-à-dire diffy = a * diffx * diffx + b * diffx; // La valeur de la constante B peut être trouvée b = (diffy - this.a * diffx * diffx) / diffx; this.element.css ({gauche: x1, top: y1}) renvoie ceci; } // Déterminer la méthode d'animation this.movestyle = function () {var mowytyle = 'position', testDiv = document.createElement ('div'); if ('placeholder' dans testDiv) {['', 'MS', 'moz', 'webkit']. foreach (function (pre) {var transform = pre + (pre? 't': 't') + 'ransform'; if (transform dans testDiv.style) {movytyle = transform;}})} return movylele; } this.move = function () {var start = new Date (). getTime (), movystyle = this.movestyle (), _This = this; timer = setInterval (function () {if (new Date (). GetTime () - start> _this.time) {ClearInterval (Timer); _This.element.css ({Left: x2, top: y2}) typeof _this.config.callback == 'function); } x = speedx * (new Date (). getTime () - start); y = _this.a * x * x + b * x; Window.RequestanimationFrame (_This.Element [0] .STYLE [MOVEYLE] = 'tradlate (' + x + 'px,' + y + 'px)');} else {_this.element [0] .style [movyyle] = 'tradlate (' + x + 'px,' + y + 'px)'; } this.init (); }Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.