Haverá uma animação parabólica para adicionar produtos ao carrinho de compras à TMall, dizendo ao usuário que a operação é bem -sucedida e a localização do carrinho de compras. Efeitos semelhantes são necessários no negócio. Registre o memorando do processo de implementação e inicie a demonstração.
No começo, não pensei em usar uma função de parábola para fazê -lo, e esqueci que havia uma função. Eu pensei que a parábola essencialmente tem uma velocidade nas direções direita e ascendente (até a demonstração acima), a velocidade à direita é uniforme, a velocidade na direção ascendente diminui e, em seguida, a direção reversa é aumentada. Os valores esquerda e superior do elemento mudam com o tempo, e a trajetória de movimento do elemento é a parábola. Essa ideia não é universal e a implementação é relativamente complicada, então eu desisti.
Mais tarde, referenciei a implementação da função parabólica de Zhang Xinxu e a melhoria do cais do tolo, e de repente percebeu.
Vou olhar para a ideia novamente. A função parabólica y = a*x*x + b*x + c, onde a não é igual a 0, a, b e c são constantes. X e Y são as coordenadas da parábola passando; a determina a direção de abertura da parábola, com a abertura de A> 0 para cima e a abertura de A <0 para baixo. É óbvio que a abertura da parábola do TMall é descendente e também determina o tamanho da abertura. Quanto menor o valor, maior a abertura, mais suave a parábola e vice -versa. Portanto, o valor de A pode ser personalizado, o que equivale a conhecer duas coordenadas (o ponto de partida e o ponto final, ou seja, o elemento esquerdo e os valores superiores). Encontrando dois números desconhecidos, você pode aprender a usar a matemática da escola secundária, equações quadráticas binárias.
y1 = a*x1*x1 + b*x1 + c
y2 = a*x2*x2 + b*x2 + c
A é conhecido, substituindo duas coordenadas conhecidas [x1, y1] [x2, y2] pode resultar nos valores de B e C, e a relação correspondente entre x e y está presente.
Independentemente de a abertura da parábola estar para cima ou para baixo, a velocidade do elemento que se move na direção horizontal permanece inalterada, ou seja, o valor esquerdo muda a uma velocidade constante. Você pode definir o tempo de movimento da parábola t. A velocidade do elemento na direção horizontal é Speedx = (x2 - x1)/t. Defina um temporizador, que é executado a cada 30ms. O valor esquerdo após cada vez que o timer for executado é o atual x = speedx * o temporizador foi executado. Substitua a função y = a*x*x + b*x + c para obter o valor superior. Como todo esse cálculo é baseado na tradução da coordenada do ponto de partida para a origem (o ponto final também é traduzido de acordo), ao finalmente definir o valor esquerdo/superior do elemento móvel, o valor esquerdo/superior inicial do elemento de ponto de partida deve ser adicionado. Para detalhes, verifique o código de demonstração em F12.
Código principal:
/** * 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 Após a execução da parábola ser concluída] */ var parabola = função (config) {var b = 0, intervalo = 15, timer = null, x1, y1, x2, y2, origemx, originidade, diffx, diffy; this.config = config || {}; // ponto inicial this.origin = $ (this.config.origin) || null; // ponto final this.target = $ (this.config.target) || null; // elemento do movimento this.Element = $ (this.config.element) || null; // curva radian this.a = this.config.a || 0,004; // Tempo de movimento (ms) this.time = this.config.time || 1000; this.init = function () {x1 = this.origin.offset (). Left; y1 = this.origin.offset (). top; x2 = this.target.offset (). esquerda; y2 = this.target.offset (). top; origemx = x1; Originy = Y1; diffx = x2-x1; diffy = y2-y1, speedx = diffx/this.time; // Sabe -se que, de acordo com a função parabola y = a*x*x + b*x + c, o ponto de partida da parábola é traduzido para a origem coordenada [0, 0] e o ponto final é traduzido de acordo. Então a parábola passa pela origem [0, 0] e obtém c = 0; // Após a tradução do ponto final, é obtido: y2 -y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1) // isto é, diffy = a*diffx*diffx + b*diffx; // O valor da constante B pode ser encontrado b = (diffy - this.a*diffx*diffx)/diffx; this.Element.css ({esquerda: x1, top: y1}) retorna isso; } // Determine o método de animação this.movestyle = function () {var movesthele = 'position', testDiv = document.createElement ('div'); if ('espaço reservado' no testDiv) {['', 'ms', 'moz', 'webkit']. foreach (function (pre) {var transform = pre + (pre? 't': 't') + 'ressonform'; se (transformar no testdiv.style) {movesthele = transform;}}); } this.move = function () {var start = new date (). gettime (), movesthele = this.movestyle (), _This = this; timer = setInterval (function () {if (new Date (). gettime () - start> _this.time) {clearInterval (timer); _this.element.css ({esquerda: x2, top: y2}) typeof _this.config.callback === '_2 _thhis) = speedx*(new Date (). gettime () - start); Window.requestanimationFrame (_This.Element [0] .Style [MoveStyle] = 'Traduzir ('+x+'px,'+y+'px)'); } this.init (); }O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.