Es wird eine parabolische Animation für das Hinzufügen von Produkten in den Einkaufswagen in Tmall geben und dem Benutzer mitgeteilt, dass der Betrieb erfolgreich ist und der Standort des Einkaufswagens. Ähnliche Effekte sind im Geschäft erforderlich. Notieren Sie das Implementierungsprozess -Memo und starten Sie die Demo.
Zuerst habe ich nicht daran gedacht, eine Parabola -Funktion zu verwenden, um dies zu tun, und ich hatte vergessen, dass es eine solche Funktion gab. Ich dachte, dass Parabola im Wesentlichen eine Geschwindigkeit nach rechts und nach oben (bis zur Demo oben) hat, die Geschwindigkeit nach rechts einheitlich, die Geschwindigkeit nach oben nimmt ab und dann wird die umgekehrte Richtung erhöht. Die linken und oberen Werte des Elements ändern sich mit der Zeit, und die Bewegungsbahn des Elements ist Parabel. Diese Idee ist nicht universell und die Implementierung ist relativ kompliziert, also habe ich aufgegeben.
Später bezog ich mich auf Zhang Xinxu durch die Umsetzung der parabolischen Funktion und die Verbesserung des Narren -Kai und erkannte sie plötzlich.
Ich werde mich die Idee noch einmal ansehen. Die parabolische Funktion y = a*x*x + b*x + c, wobei a nicht gleich 0, a, b und c sind, sind Konstanten. x und y sind die Koordinaten der Parabel; A bestimmt die Öffnungsrichtung der Parabel, wobei die Öffnung von A> 0 nach oben und die Öffnung eines <0 nach unten. Es ist offensichtlich, dass die Parabola -Öffnung des Tmall nach unten ist und auch die Größe der Öffnung bestimmt. Je kleiner der Wert, desto größer die Öffnung, desto glatter die Parabel und umgekehrt. Daher kann der Wert von a angepasst werden, was dem Wissen zweier Koordinaten entspricht (das Sitzen des Ausgangspunkts und der Endpunkt, dh das Element links und die oberen Werte). Wenn Sie zwei unbekannte Zahlen finden, können Sie lernen, wie man die Mathematik der Junior High School, binäre quadratische Gleichungen verwendet.
y1 = a*x1*x1 + b*x1 + c
y2 = a*x2*x2 + b*x2 + c
A ist bekannt und ersetzt zwei bekannte Koordinaten [x1, y1] [x2, y2] kann zu den Werten von B und C führen, und die entsprechende Beziehung zwischen x und y ist vorhanden.
Unabhängig davon, ob die Parabelöffnung nach oben oder nach unten ist, bleibt die Geschwindigkeit des Elements, das sich in horizontaler Richtung bewegt, unverändert, dh der linke Wert ändert sich mit konstanter Geschwindigkeit. Sie können die Parabelbewegungszeit festlegen. Die Geschwindigkeit des Elements in horizontaler Richtung ist spezx = (x2 - x1)/t. Stellen Sie einen Timer ein, der alle 30 ms ausgeführt wird. Der linke Wert nach jeder Ausführung des Timers ist der aktuelle X = Speedx * Der Timer wurde ausgeführt. Ersetzen Sie die Funktion y = a*x*x + b*x + c, um den Top -Wert zu erhalten. Da all diese Berechnung auf der Übersetzung der Ausgangspunktkoordinate zum Ursprung basiert (der Endpunkt wird ebenfalls entsprechend übersetzt), muss bei schließlich den linken/oberen Wert des sich bewegenden Elements der anfängliche linke/obere Wert des Ausgangspunktelements hinzugefügt werden. Weitere Informationen finden Sie im Demo -Code in F12.
Hauptcode:
/** * js parabola animation* @param {[object]} origin [start element] * @param {[object]} target [target point element] * @param {[object]} element [element to move] * @param {[number]} a [parabola radian] * @param {[number]} time [animation execution time] * @param {[function]} callback [callback after Die Ausführung der Parabola ist abgeschlossen] */ var parabola = Funktion (config) {var b = 0, intervall = 15, timer = null, x1, y1, x2, y2, Originx, Originy, Diffx, Diffy; this.config = config || {}; // Startpunkt this.origin = $ (this.config.origin) || null; // end Point this.target = $ (this.config.target) || null; // Bewegungselement this.element = $ (this.config.element) || null; // Curve Radian this.a = this.config.a || 0,004; // Bewegungszeit (MS) this.time = this.config.time || 1000; this.init = function () {x1 = this.origin.Offset (). Links; y1 = this.origin.Offset (). Top; x2 = this.target.Offset (). y2 = this.target.Offset (). Top; OriginX = x1; Originy = y1; Diffx = x2-x1; diffy = y2-y1, speedx = diffx/this.time; // Es ist bekannt, dass nach der Parabola -Funktion y = a*x*x + b*x + c der Ausgangspunkt der Parabola in den Koordinatenursprung [0, 0] übersetzt wird und der Endpunkt entsprechend übersetzt wird. Dann geht die Parabola durch den Ursprung [0, 0] und erhält C = 0; // Nach der Übersetzung des Endpunkts wird er erhalten: y2 -y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1) // d. H. Diffy = a*diffx*diffx + b*diffx; // Der Wert von Konstante B kann b = (diffy - this.a*diffx*diffx)/diffx gefunden werden; this.element.css ({links: x1, ober: y1}) gibt dies zurück; } // Die Animationsmethode ermitteln. if ('Platzhalter' in testdiv) {['', 'ms', 'moz', 'webkit']. foreach (funct (pre) {var transform = pre + (pre? 't': 't') + 'ransform'; if (Transformation in testdiv.style) {movestyle = transformation; } this.move = function () {var start = new Date (). GetTime (), movestyle = this.movestyle (), _this = this; timer = setInterval (function () {if (new Date (). GetTime () - start> _this.time) {ClearInterval (Timer); _this.element.css ({links: x2, top: y2}) typeof _this.config.callback === _This.Configback (_this.this.this.this.this. } x = speedx*(neuer Datum (). GetTime () - Start); Fenster. } this.init (); }Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.