There will be a parabolic animation for adding products to the shopping cart to Tmall, telling the user that the operation is successful and the location of the shopping cart. Similar effects are needed in the business. Record the implementation process memo and start demo.
At first I didn't think of using a parabola function to do it, and I had forgotten that there was such a function. I thought that parabola essentially has a speed to the right and upward directions (as far as the demo above), the speed to the right is uniform, the speed to the upward direction decreases, and then the reverse direction is increased. The left and top values of the element change with time, and the element's movement trajectory is parabola. This idea is not universal, and the implementation is relatively complicated, so I gave up.
Later, I referenced Zhang Xinxu's implementation of the parabolic function and the improvement of the Fool's Wharf, and suddenly realized it.
I will look at the idea again. The parabolic function y = a*x*x + b*x + c , where a is not equal to 0, a, b, and c are constants. x and y are the coordinates of the parabola passing through; a determines the opening direction of the parabola, with the opening of a>0 upward and the opening of a<0 downward. It is obvious that the Tmall's parabola opening is downward, and a also determines the size of the opening. The smaller the value, the larger the opening, the smoother the parabola, and vice versa. Therefore, the value of a can be customized, which is equivalent to knowing two coordinates (the starting point and end point sitting, that is, the element left and top values). Finding two unknown numbers, you can learn how to use the mathematics of junior high school, binary quadratic equations.
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 result in the values of b and c, and the corresponding relationship between x and y is present.
Regardless of whether the parabola opening is upward or downward, the speed of the element moving in the horizontal direction remains unchanged, that is, the left value changes at a constant speed. You can set the parabola movement time t. The element's speed in the horizontal direction is speedx = (x2 - x1)/t. Set a timer, which is executed every 30ms. The left value after each time the timer is executed is the current x = speedx * The timer has been executed. Substitute the function y = a*x*x + b*x + c to get the top value. Since all this calculation is based on the translation of the starting point coordinate to the origin (the end point is also translated accordingly), when finally setting the left/top value of the moving element, the initial left/top value of the starting point element must be added. For details, please check the demo code in F12.
Main code:
/** * 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 parabola execution is completed] */ var parabola = function(config){ var b = 0, INTERVAL = 15, timer = null, x1,y1,x2,y2,originx,originy,diffx,diffy; this.config = config || {}; // Start point this.origin = $(this.config.origin)||null; // End point this.target = $(this.config.target)||null; // Element of motion this.element = $(this.config.element)||null; // Curve radian this.a = this.config.a || 0.004; // Movement 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 according to the parabola function y = a*x*x + b*x + c, the starting point of the parabola is translated to the coordinate origin [0, 0], and the end point is translated accordingly. Then the parabola passes through the origin [0, 0] and obtains c = 0; // After the end point is translated, it is obtained: y2-y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1) // i.e. diffy = a*diffx*diffx + b*diffx; // The value of constant b can be found b = (diffy - this.a*diffx*diffx)/diffx; this.element.css({ left: x1, top: y1 }) return this; } // Determine the animation method 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' && _this.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 all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.