Habrá una animación parabólica para agregar productos al carrito de compras a Tmall, diciéndole al usuario que la operación es exitosa y la ubicación del carrito de compras. Se necesitan efectos similares en el negocio. Registre la nota del proceso de implementación y inicie la demostración.
Al principio no pensé en usar una función de parábola para hacerlo, y había olvidado que había tal función. Pensé que la parábola esencialmente tiene una velocidad hacia las direcciones derecha y ascendente (en cuanto a la demostración de arriba), la velocidad a la derecha es uniforme, la velocidad hacia la dirección ascendente disminuye y luego se aumenta la dirección inversa. Los valores izquierdo y superior del elemento cambian con el tiempo, y la trayectoria de movimiento del elemento es la parábola. Esta idea no es universal, y la implementación es relativamente complicada, por lo que me di por vencido.
Más tarde, hizo referencia a la implementación de Zhang Xinxu de la función parabólica y la mejora del muelle del tonto, y de repente me di cuenta.
Volveré a ver la idea. La función parabólica y = a*x*x + b*x + c, donde a no es igual a 0, a, b y c son constantes. X e Y son las coordenadas de la parábola que pasa; A determina la dirección de apertura de la parábola, con la apertura de A> 0 hacia arriba y la apertura de A <0 hacia abajo. Es obvio que la apertura de la parábola de Tmall está hacia abajo, y A también determina el tamaño de la abertura. Cuanto menor sea el valor, mayor es la abertura, más suave es la parábola y viceversa. Por lo tanto, el valor de A se puede personalizar, que es equivalente a conocer dos coordenadas (el punto de partida y el punto final sentado, es decir, el elemento de los valores izquierdo y superior). Al encontrar dos números desconocidos, puede aprender a usar las matemáticas de la escuela secundaria, ecuaciones cuadráticas binarias.
y1 = a*x1*x1 + b*x1 + c
y2 = a*x2*x2 + b*x2 + c
A se conoce, sustituir dos coordenadas conocidas [x1, y1] [x2, y2] puede dar lugar a los valores de B y C, y la relación correspondiente entre x e y está presente.
Independientemente de si la abertura de la parábola es hacia arriba o hacia abajo, la velocidad del elemento que se mueve en la dirección horizontal permanece sin cambios, es decir, el valor de la izquierda cambia a una velocidad constante. Puede establecer el tiempo de movimiento de la parábola t. La velocidad del elemento en la dirección horizontal es Speedx = (x2 - x1)/t. Establezca un temporizador, que se ejecuta cada 30 ms. El valor izquierdo después de cada vez que se ejecuta el temporizador es la actual x = Speedx * El temporizador ha sido ejecutado. Sustituya la función y = a*x*x + b*x + c para obtener el valor superior. Dado que todo este cálculo se basa en la traducción de la coordenada del punto de partida al origen (el punto final también se traduce en consecuencia), al establecer finalmente el valor izquierdo/superior del elemento móvil, se debe agregar el valor inicial izquierdo/superior del elemento del punto de partida. Para obtener más detalles, consulte el código de demostración en F12.
Código principal:
/** * js parabola animación * @param {[object]} origen [start element] * @param {[object]} target [elemento de punto de destino] * @param {[object]} elemento [elemento para mover] * @param {[number]} a [parabola radian] * @param {[number]} tiempo de ejecución de la animación] La ejecución de la parábola se completa] */ var parabola = function (config) {var b = 0, interval = 15, timer = null, x1, y1, x2, y2, originx, originy, diffx, diffy; this.config = config || {}; // Punto de inicio this.origin = $ (this.config.origin) || null; // End Point this.target = $ (this.config.target) || null; // Elemento de movimiento this.element = $ (this.config.element) || null; // curva radian this.a = this.config.a || 0.004; // Tiempo de movimiento (ms) this.time = this.config.time || 1000; this.init = function () {x1 = this.origin.offset (). Left; y1 = this.origin.offset (). Top; x2 = this.target.offset (). izquierda; y2 = this.target.offset (). Top; originx = x1; Originy = Y1; diffx = x2-x1; diffy = y2-y1, speedx = diffx/this.time; // se sabe que según la función de la parábola y = a*x*x + b*x + c, el punto de partida de la parábola se traduce al origen coordinado [0, 0], y el punto final se traduce en consecuencia. Luego la parábola pasa a través del origen [0, 0] y obtiene C = 0; // Después de traducir el punto final, se obtiene: y2 -y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1) // i.e. diffy = a*diffx*diffx + b*diffx; // El valor de constante B se puede encontrar b = (diffy - this.a*diffx*diffx)/diffx; this.element.css ({izquierda: x1, arriba: y1}) devuelve esto; } // Determine el método de animación this.moveStyle = function () {var mudeStyle = 'position', testDiv = document.createElement ('div'); if ('PLODHOLDER' en testDiv) {['', 'ms', 'moz', 'webkit']. foreach (function (pre) {var transform = pre + (pre? 't': 't') + 'ransform'; if (transformar en testdiv.ststy } 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 ({izquierda: x2, top: y2}) typeOf _this.config.callback ==== 'function' && _this.config.callback (_); } x = speedx*(nueva fecha (). getTime () - inicio); Window.RequestanimationFrame (_This.Element [0] .Style [Movestyle] = 'traduce ('+x+'px,'+y+'px)'); } this.init (); }Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.