JS draw a shopping cart parabolic animation _javascript Tips

The cat will be the product into the shopping cart will have a parabola animation, tell users the operation of the success and the location of the cart, business needs to use similar effects, record the implementation process of the memo, first demo

In the beginning did not expect to do with the parabolic function, has also forgotten that there is a function, thinking that the parabola is essentially right and upward in the direction of each has a speed (on the above demo), the right speed uniform, the speed of the upward decline, reduced to 0 and then the opposite direction increment, The left and top values of the elements change with time, and the trajectory of the elements is parabola, which is not universal, and the implementation is more complex, give up.

After referring to the ROK Zhang Xinsen Xu with the parabolic function of the implementation of the way and the improvement of Fools Wharf, suddenly enlightened.

Thought I smoothed again, the parabola function y = a*x*x + b*x + C, where a is not equal to 0,a, B, C is constant. X and y are the coordinates of the parabola; a determines the opening direction of the parabolic line, a>0 openings upward and a<0 openings downward. It is obvious that the Sky Cat's parabolic opening downward, a also determines the size of the opening, the smaller the value of the larger openings, the more smooth the parabola, in contrast, the parabolic steeper. So the value of a can be customized, equal to the known two coordinates (starting point and end of the sitting, that is, the element left, the top value), to find two unknown, Junior high school mathematics, two Yuan two times equation.

Y1 = a*x1*x1 + b*x1 + C
y2 = a*x2*x2 + b*x2 + C

A is known, substituting two known coordinates [X1, y1][x2, Y2] can derive the value of B, C, and the corresponding relationship between x and Y.

Whether the parabolic openings up or down, the element moves horizontally in the same speed, that is, the left value of uniform change, you can set the parabola motion time t, the element in the horizontal direction of the speed of Speedx = (x2-x1)/T, set a timer, every 30ms to execute once, The left value after each timer executes is the current x = Speedx * Timer has been executing for a long time, then substituting the function y = a*x*x + b*x + C Gets the top value, because all of these calculations are based on the translation of the start coordinates to the origin (the endpoint also translates), So the initial left/top value of the starting element must be added to the final setting of the Left/top value of the motion element. Please F12 view the demo code specifically.

Main code:

/** * JS Parabolic animation * @param {[object]} origin [start element] * @param {[object]} Target [Destination point elements] * @param {[Object]} element [to
  Moving elements] * @param {[number]} A [parabola radians] * @param {[number]} time [animation execution times] * @param {[function]} callback [callback after parabola execution complete] */var parabola = function (config) {var b = 0, INTERVAL =, timer = null, X1,Y1,X2,Y2,ORIGINX,ORIGINY,DIFFX

  , Diffy; this.config = Config | |
  {}; Beginning This.origin = $ (this.config.origin) | |
  Null End this.target = $ (this.config.target) | |
  Null Sporty Elements this.element = $ (this.config.element) | |
  Null Curve radian this.a = THIS.CONFIG.A | |
  0.004; Exercise time (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; It is known that a, according to the parabola function y = a*x*x + b*x + C, translates the parabola starting point to the coordinate origin [0, 0], whichThe parabola passes through the origin [0, 0] to obtain c = 0;
   After the end of the translation is drawn: y2-y1 = * (x2-x1) * (x2-x1) + b* (X2-X1)//That is Diffy = A*diffx*diffx + b*diffx;
   The value B = (DIFFY-THIS.A*DIFFX*DIFFX)/diffx of constant b can be obtained;
  This.element.css ({left:x1, top:y1}) return this;
   //Determine animation mode This.movestyle = function () {var movestyle = ' position ', Testdiv = document.createelement (' div '); if (' placeholder ' in testdiv) {[', ' Ms ', ' Moz ', ' WebKit '].foreach (function (pre) {var transform = pre + (pre?)
     ' t ': ' t ') + ' ransform ';
     if (transform in testdiv.style) {Movestyle = transform;
  })} return movestyle;
   } 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 ({left:x2, top:y2}) typeof _this.config.callback = = ' function ' && _thi S.config.calLback (_this.element);
    Return
    x = Speedx * (new Date (). GetTime ()-start);
    y = _this.a*x*x + b*x;
     if (Movestyle = = ' position ') {_this.element.css ({left:x+originx, top:y+originy})}else{ if (window.requestanimationframe) {window.requestanimationframe (_this.element[0].style[movestyle] = ' Translate (' +x
     + ' px, ' +y+ ' px ');
     }else{_this.element[0].style[movestyle] = ' translate ' (' +x+ ' px, ' +y+ ' px) ';
  }},interval) return this;
 } this.init ();
 }

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.