Small toss: The parabolic trajectory movement between JavaScript and elements

By Zhangxinxu from http://www.zhangxinxu.com this address: http://www.zhangxinxu.com/wordpress/?p=3855 one or one dose prevention needle

A good experience should be before users try to tell the product of some characteristics, limitations and so on. Like the pants are off, only to a sentence: "My great aunt today," the scene is obviously to let the enthusiastic users frustrated.

So, it is necessary to make a preventive needle here, this article actually has no technical nourishment, that is, last night because the actual work needs to toss something, parabolic trajectory animation. If you are in a hurry to be ignorant of the goddess, the following can be directly pass~~

But here's a nutrient thing to share with you, when to be, that's the following:

Authentic Qujiang Kiwi. Company benefits, Internal price,37 yuan a box , yes! You're not mistaken! is 37 dollars! Genuine 37 Yuan! It's full of 27 Kiwi! Each juicy sweet, seductive incomparable! Almost everyone around me has a crate! Isn't that a good deal huh? is not very exciting ah! is not very envy ha! I plant similar to the benefits of nutrition there are many Oh! Heart not action, the younger sister forever passive. Secretly tell you oh, our side is not a front end, we isux Shanghai but I plant a very good team oh, not yet resume speed fly –[email protected]. Don't worry, your resume is low I will also be patient to reply to you, will never go down, repeat your unhappy experience of the ha!

Second, animation and visual guidance

Adding an element's displacement animation to the page, in addition to the visual effect (which is secondary), has a function of visual guidance (emphasis). For example, as you may have seen, when choosing a product, we want the product to fly to the edge or corner of the shopping cart, the function is: one to tell in the shopping cart success, and let users know where the shopping cart.

But, go straight to the movement you use I also use, does not have the brilliant Ah, therefore, has the idea, I parabolic the line past, will have the different style.

So, after work to take time to toss ha ~ ~

So there is today this article of no nourishment.

Ha, wait a moment, I go home first, Madam urges, go back to eat a Kiwi to add nourishment, continue ha ...

Mathematical function and animation trajectory

ZXX: The next day ...

Often the cloud: "The book to Time to hate less." In fact, I think there is a part of the responsibility of the teaching people. Like high School, Pinsipinhuo learn a variety of function curves. Why do we learn? Obviously, for the exam! Short-sighted and utilitarian educational environment let the teacher a family's vision also put in the examination result. This is why China has been a great test-taker, practicing and innovating the tail of the crane.

In fact, learning these functions is not for exams, but for future work and for solving the practical problems of life. Know what these can do to foster real interest in order to truly Excel and apply. So, you don't have to regret that you did not study well, is the big environment limit your study at that time.

Take a computer graphics animation example, in fact, any regular movement is the presentation of mathematical functions.

Imagine, if the math teacher can put the function, and the actual application, for example, tell the students like to play games: "Jian Ling" "Heroes League" Those gorgeous effects are here parabolic AH gravity ah, such as the worked function implementation. If you are interested in the game, the game-related work, these functions are to be firmly mastered! This kind of education is more useful than "You do not study hard, test a good result, find a good job". If you can do something different--small device, or small game. I wipe, that's not the sky! This baby is not the future Elite is also wonderful!

Ah, seriously.

To make the page element parabola run, it's simple. You can apply a parabolic function. The formula is as follows:

y = a*x*x + b*x + C

(x, y)Is the point coordinate, which can be interpreted as the offset pixel size relative to the upper-left corner of the page.

Then, to apply for parameters, you can get the parabolic function of the current position! Of course, the actual operation is not as simple as the keyboard popping a few words.

Four, PARABOLIC function solution

ZXX: If the content of this paragraph reminds you of the past of the terrible memories, I say sorry first! – Baa

Now, our task becomes solved: a , b , c three parameters.

3Parameters require 3 a condition to be fully solved.

Since we are going to implement the parabolic motion of element A to element B, we can specify the coordinate position of the two points, that is, the 2 condition is known, and the first 3 condition?

The students who understand the parabolic function should know thata can be approximated as radians and curvature. This should be controllable when we achieve the effect. You can't just throw the element on the horoscope and fall. On a Web page, it is generally a parabolic (otherwise out of the screen) with little fluctuation.

Therefore, we can use a as a parameter constant.

Thus, our task becomes the known parameter a , and the coordinates of two points, and the parabolic function is obtained.

Ha, it's a lot easier.

y = a*x*x + b*x + c↓y1 = A * x1*x1 + b*x1 + c;y2 = A * x2*x2 + b*x2 + c;↓a known, ask B, C

To simplify our computational solution and match our high school function coordinates, we can use the initial position of the moving element as the center of the axis (the top left corner of the page's default coordinate system is the center, the axis to the x right, the y axis down, not the same as the high school axis). The link below corresponds to the demo.

You can mercilessly click here: Elemental Parabolic Motion Demo

In the demo page, the round ball is the element to be moving, and the oval stool is the destination of the ball motion, and the default starting coordinates are as follows:

That is, we limit the parabola through the center point (0, 0) , the generation y1 = a * x1*x1 + b*x1 + c can be obtained c = 0 , so b = (y2+ a*x2*x2) / x2 , take into the stool pool element coordinates, you can calculate b the size, so the parabolic function came out.

Note that the "coordinate of the stool element" Here is relative to the ball's relative coordinates, not the upper-left corner of the page.

With the parabolic function, we have the trajectory of the ball motion.

V. Demo Demonstration and description

Demo Demo page is the link address of the above-mentioned early exposure!

1. Clicking anywhere on the page will trigger the parabolic motion of the ball to the stool pool. 2. Drag the stool to any position on the page, it will also trigger ball balls to go to the stool pool effect.

This parabolic motion of the demo page is basically an independent JS method, the code is as follows:

var funparabola=function (d,t,g) {var i={speed:166.67,curvature:0.001,progress:function () {},complete:function () {}} ; var p={};g=g| | {};for (var v in i) {p[v]=g[v]| | I[v]}var u={mark:function () {return this},position:function () {return this},move:function () {return this},init: function () {return this}};var e= "margin", r=document.createelement ("div"), if ("Oninput" in R) {["", "MS", "WebKit"]. ForEach (function (b) {var a=b+ (b? ") T ":" T ") +" Ransform ", if (a in R.style) {e=a}})}var S=p.curvature,q=0,o=0;var k=true;if (d&&t&& D.nodetype==1&&t.nodetype==1) {var n={},j={};var h={},m={};var f={},l={};u.mark=function () {if (K==false) { Return This}if (typeof f.x== "undefined") {this.position ()}d.setattribute ("Data-center", [F.x,f.y].join ()); T.setattribute ("Data-center", [L.x,l.y].join ()), return This};u.position=function () {if (k==false) {return This}var b= document.documentelement.scrollleft| | document.body.scrollleft,a=document.documentelement.scrolltop| | Document.body.scrolltop;if (e== "margin") {D.style.marginleft=d.style.margintop= "0px"}else{d.style[e]= "translate (0, 0)"}n=d.getboundingclientrect (); J=t.getboundingclientrect () ; h={x:n.left+ (N.right-n.left)/2+b,y:n.top+ (n.bottom-n.top)/2+a};m={x:j.left+ (j.right-j.left)/2+b,y:j.top+ ( J.bottom-j.top)/2+a};f={x:0,y:0};l={x:-1* (h.x-m.x), y:-1* (H.Y-M.Y)};q= (l.y-s*l.x*l.x)/l.x;return this};u.move= function () {if (k==false) {return this}var A=0,b=l.x>0?1:-1;var c=function () {var z=2*s*a+q;a=a+b*math.sqrt (p.speed /(z*z+1)); if ((b==1&&a>l.x) | | | (b==-1&&a<l.x)) {A=l.x}var W=a,a=s*w*w+q*w;d.setattribute ("Data-center", [Math.Round (W), Math.Round (a)].join ()), if (e== "margin") { d.style.marginleft=w+ "px";d. style.margintop=a+ "px"}else{d.style[e]= "Translate (" +[w+ "px", A + "px"].join () + ")"}if ( a!==l.x) {p.progress (w,a); Window.requestanimationframe (c)}else{p.complete (); k=true}}; Window.requestanimationframe (c); K=false;return this};u.init=function () {this.position (). Mark (). Move ()}}return u };(function () {var b=0;var c=["WebKit", "Moz"];for (Var a=0;a<c.length&&!Window.requestanimationframe;++a) {window.requestanimationframe=window[c[a]+ "requestanimationframe"]; window.cancelanimationframe=window[c[a]+ "Cancelanimationframe"]| | window[c[a]+ "Cancelrequestanimationframe"]}if (!window.requestanimationframe) {window.requestanimationframe= function (h,e) {var d=new Date () getTime (); var F=math.max (0,16.7-(D-b)); var g=window.settimeout (function () {h (d+f)},f ); B=d+f;return g}}if (!window.cancelanimationframe) {window.cancelanimationframe=function (d) {clearTimeout (d)}}} () );

ZXX: In order to save the article space, here is the compressed code. If you are interested in implementation, you can right-click on the demo page of the source code is a non-compressed version, contains a lot of comments. Or use this JS file: parabola.js

The parabolic method is named funParabola , you can modify according to your preferences, parameters and basic use as follows:

var Myparabola = Funparabola (element, target, options);

about Myparabola: the direct execution funParabola method does not produce motion. Because, actually, funParabola the execution returns an object. The following four methods are included:

1. markMarks the current center coordinate with a custom attribute on the target element and on the moving element data-center , such as -234, -345 . This method is mainly used in the demo, convenient for testing and previewing. may be of little use in practice.
2. positionGets the position of the element again. This method is useful when the relative position of the element changes. Otherwise, there will be a case of calculation error. For example, the page layout is adaptive or responsive, the width of the browser is smaller, and the distance between the two elements changes, and it needs to be executed position to store the new coordinate position.
3. moveTrigger parabolic motion.
4. initInitialize the method. is actually a sequential position call mark , move 3 methods.

Demo Click on the page to trigger the parabolic motion in any position is so triggered:

/* Elements */var element = document.getElementById ("element"),     target = document.getElementById ("target");  The position of the parabolic element is labeled var parabola = Funparabola (element, target). Mark (); //Parabolic motion Trigger Document.body.onclick = function () {    element.style.marginLeft = "0px";    Element.style.marginTop = "0px";    parabola.init ();};  

Parameter description:

• elementRepresents a moving element, such as a ball in a demo. Native DOM node
• targetRepresents the target element. For example, the Oval stool in the demo. Native DOM node
• optionsAs an optional parameter. The respective API names and meanings are as follows:
  • speedRepresents the size of pixels moved per frame, approximately 16~17 milliseconds per frame (for most displays). The default size is 166.67. That is the default 10px/ms .
  • curvatureCan be approximated as the initial size of the parabola, which is the curvature. A positive number indicates a downward opening. The default size is. The larger 0.001 the value, the smaller the start and the higher the radian. Because Web pages are hundreds of pixels in size, the curvature value is small.
  • progressRepresents a callback in the parabolic motion process, supports two parameters, x and y represents the current coordinates, you can do some special processing according to these coordinate values.
  • completeRepresents the callback after the parabolic movement has ended.

Other Notes:

1. The optional parameter speed is not the x displacement of the axis, nor the y axis displacement, but the tangent distance of the parabolic specific coordinates. Using the tangent formula: y‘=2ax+b You can calculate the x distance that the axis should be moved by this frame. Create a sporty effect toward your destination.
2. funParabolamethod does not depend on any JS framework. You can use it boldly. By the way, the funParabola method is used requestAnimationFrame . About requestAnimationFrame the life, work and other private information can refer to my previous "CSS3 animation so strong, requestanimationframe and yarn?" "article. The above compressed JS contains the requestAnimationFrame relevant compatibility processing, so IE6 browser can also use drip!

   If you are using a method in the demo source code funParabola . If you want to lower version IE browser also has the effect, need to call back this JS:requestAnimationFrame.js, very small number of JS code, mainly do compatible processing. Therefore, you can copy them directly.

   Of course, the most lazy way is to use parabola.js or compressed version of Parabola-min.js directly. We recommend that you copy to local use, try not to direct my site outside the chain address. Once the chain request exceeds my tolerance level, I will add such a sentence JS:

   Ddocument.body.insertAdjacentHTML ("Afterbegin", "<a href=" Ooxxooxxooxxooxx-huluwa.mp4 "> Boss and Secretary of Passion Fight 720x480.mp4</a> ');

   You can take your own discretion.

Vi. Practical application of signals

Concept works can make people's eyes bright, but only the physical products will make people's heartbeat. Therefore, attach an example that matches the actual application scenario, that is, the "product to cart" effect that was mentioned. Naturally, with the help of the above toss funParabola method.

You can mercilessly click here: Product parabolic fly to Shopping cart effect demo

The demo page uses a certain Cat product page. Originally added to the shopping cart effect is also very delicate-move to the shopping cart (straight line), and then fall (with height changes). //zxx: You can open a product detail page and feel it yourself.

Here, the parabolic effect is changed.

Click on the demo two "Add To Cart" button, you can see the effect of parabolic fall.

For practical use, more detail is actually needed. For example, when approaching a shopping cart, the shopping cart should have an action. Enter the shopping cart, whether the shopping cart need to shake a bit, that I eat into the merchandise, I am very good! Wait ~

Vii. other functions

Extrapolate, comprehend by analogy. If you want to achieve other motion trajectory effects, such as hyperbola, or elliptical motion. Can be based on the mathematical function, according to the above parabolic line of thought. A little tossing and tossing, the effect will come out.

These are actually simple animated effects. You may feel that the effect is limited. In fact, many of the effects you've seen that have been removed from the dregs have been evolved or superimposed by this basic animation effect. How to evolve and overlay, this is a skill. This belongs to another direction of knowledge.

If you are good at animation-related algorithms or techniques, you can be a popular bobo for many businesses.

Viii. Slow motion and speed

Previously there are some algorithms that introduce easing. You can let the animation speed first and then slow, or first slow or fast, or bounce. Although easing is essentially a curve. However, the parabolic function curve is not the same as here.

The variable unit of the easing is the time, and the variable unit of the parabolic effect here is the pixel.

As a result, easing changes the speed, and here the change is the motion trajectory.

But, the same thing, the shape of the curves they draw can be similar. That is, they all use maths.

Childhood, the teacher's mouth often will jump out of such a sentence: "Learn physics, go all over the world are not afraid!" ”

Now understand, really is very reasonable ha!

In fact, more reasonable is the latter half sentence: "Unless you have a good father!" ”

It's too deep!

Nine, Bezier curves and arbitrary trajectories

For a regular trajectory, we can apply mathematical functions. What if it's not regular? For example, I want to make a car like a drunken wine curve movement, how to do?

It may be necessary to draw with Bezier curves.

With SVG or canvas.

To say svg and canvas ...

A moment, my brain like the high-speed service area of the stool block, this SVG and canvas-related knowledge points too much, it is super big topic to avoid nutrition over Sheng, indigestion, related content 1.1 points behind and share with you.

So far, thank you for being able to read this!

In general, it will be the masterpiece behind the twist, please look forward to it!

Welcome to the Exchange!

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com] This address: http://www.zhangxinxu.com/wordpress/?p=3855

Small toss: The parabolic trajectory movement between JavaScript and elements