Java Web motion front end

"Write in front of the words:"
Just now I saw a word: good technical articles should let the reader feel more confidence, rather than lose confidence.
Feeling in this sentence is because before thought hair some seemingly advanced, look nb of things just counted a good blog post, but how much a bit of dazzle technical ingredient. But then the more I find it hard to tell a seemingly simple question. I hope that the future of the article will bring more readers a little help. This is one of my goals.

Web front-end, it is true that the code inside a very special position, not only to the rational coding, but also the emotional touch of the UI, usually I call this job needs emotional quotient of code word workers.

To say how difficult the front-end, I think it will be a lot of algorithms or the bottom of the students despise. Indeed, the work of the front desk is not difficult, especially the web-side of the front desk, there are difficult parts, that is also a few. So in the early days of the internet, there was no front-end position, even if there was a front-end position, was also regarded as one of the lowest-threshold IT jobs. Many students learn the front-end related knowledge, the original intention is very simple, because studious, including that year's own also the same:)

Of course, with the continuous complexity of the interactive logic and the continuous improvement of the user experience, many back-end logic has been transferred to the front-end to achieve. Front-end workers are beginning to have some value. Of course, you have to play more, you will need to be more. So now for a good front desk coding workers, the requirements are much higher.

But again, it can't be difficult. Because even the front end are beginning to touch some algorithms, some mathematical physics things, but commonly used, is usually limited to the original intention, the degree of high school. So God horse advanced mathematics, advanced physics and the like. I can't use it for the time being, and we don't have to fear it at all.

So, for example:

"About Ease"
I believe that when it comes to the DHTML era, the so-called Dynamic HTML, the JavaScript script starts doing things that make the page move, in addition to doing some form validation and submission. The most common is what slides, carousel banner and the like. Even when I was able to write a good, compatible carousel plugin was a very niu thing. So recall, we are the first to learn, try to write a carousel plug-in time, encountered the headache, I think the ease of action should be counted one.
Well, let's talk about it first.

Ease is difficult, not difficult, we first say one of the simplest. The so-called "slow action" is nothing more than the movement of more and more slowly bai. So how to make an object move more and more slowly.

We use the timer, whether you are using setinterval or settimeout, or requestanimationframe or, the idea is the same. Think of it as a unit time calling a function repeatedly. That's good, since the unit time is the same, then we let the unit time within the distance of the object is increasingly small and not become a "slow action" it.

OK, we can try it:

If we have a fixed distance of 100 meters, and then let the object each unit of time within the movement is its distance from the destination of 1/10, what is the meaning of it. That is, the object at the beginning of 100 meters from the destination, then its first unit of time toward the destination movement 100*1/10, that is, 10 meters, so, the second unit time, it is only 90 meters away from the destination, then the second movement 90*1/10, that is, 9 meters, ... Constantly superimposed, because the object is always closer to the destination, then its unit time in the movement of the distance must be less and less. Does that not achieve the purpose of our slow motion?

(function() {    varmoveDis = 0,        conEl = document.getElementById(‘container‘),        maxDis = (conEl.offsetWidth-22) || (800-20), // 总距离        moveEl = document.getElementById(‘move‘);            functionstep () {         varnowLeft = parseInt(moveEl.style[‘left‘]),            leftDis = maxDis - nowLeft, // 获取距离目的地的距离            stepDis = Math.ceil(leftDis*.015); // 每次移动 剩余距离的 固定百分比。                    nowLeft += stepDis; // 不断叠加        moveEl.style[‘left‘] = nowLeft + ‘px‘;        requestAnimFrame(step); // repeat    }        step();})();

Tween Demo 1

Of course, this is the simplest mode, let's go ahead and look down.

So, how did those seemingly advanced easing formulas come about?

In fact, it is very simple, think of our junior high school math bar, two functions, trigonometric and so on.

Let's look at the two-time function, which is our parabola:

Why do I have to say that I should look at two functions or trigonometry? What does their trajectory have to do with easing? We then looked down:

Taking the simplest demo example above, we draw the motion relationship between the block's running distance s and the time t to see what it looks like.

Look at this demo:
Tween Demo 2

The easing algorithm is exactly the same as the simplest one above. We have a picture of its T-S route, so we can see a little clue. Do not see the classmate, rotate it, imagine the x-axis time, y-axis displacement. So it's like the shape of the left half of the two-time function I painted above.

So, to this end, I believe it is not difficult to understand why the easing formula is usually related to the two-time function or trigonometric functions, the intuitive point is that in a certain interval the rate of change in displacement is decreasing with time. Then this trajectory can be used as an easing formula.

So

How do we use the two-time function to do the easing? Very simple, everyone with my ideas come. We want to design an easing interface API, if it is similar to the following, we first think of the simplest way.

"Known": an object to run from 0 to 400 with a running time of 1 seconds (1000ms).
So how do we design a two-time easing of the function for it? Let's draw one first:

So the coefficients of the equation a = 0.00005, B =-0.1;

Then the equation is out. S = 0.00005*t^2-0.1*t (0 < T <=1000);

The rest is good to do, and each point in time to render the location of the good.
For example, let's take an example and design an API:

// from 表示起始点// to 表示到达位置// t 表示运行总时间tween(from, to, t)

According to the above-mentioned idea, is actually known running distance (from-to) and run time t, to find a two-time function formula.

// 二次函数 s = a*t^2 + b*t;// 顶点： (to-from) = a*t^2 + b*t// 右侧x轴交点： 0 = a*(2t)^2 + b*2t// 得出 a = -(to-from)/t^2; b = 2(to-from)/t; varleft = a*st*st + b*st; o.style[‘left‘] = from + left + ‘px‘;

See Demo:
Tween Demo 3 (demo inside because of the normal DOM generated point graph, will occupy memory, please do not test multiple ^^).

The principle is actually so simple, in fact, we can try it yourself, familiar with the following can completely encapsulate their good, easy-to-use easing method.

With this kind of two functions, there is also a very common scenario, which is the "Gravity system".

We know that if we ignore the so-called air resistance and some external disturbances, the gravity system can actually simplify the two-time function (parabola) problem.

For example, we do a small game, the system has a fixed downward gravity g, then by the user operation of the protagonist in the process of jumping like, it can be considered in the way described above.

The basic idea above all said, this time we change a train of thought. It is said that mathematics and physics are interlinked, so this time it is known that in a gravity system, jumping at the initial velocity and gravity size. So what if an object jumps?

S = v0*t + a*t^2

v0 = a*t

These two should be the physics formula of junior high school. The initial velocity v0 and acceleration A are known, and the displacement is not simple.
I will not talk about the other, see a simple demo it:
Bounce Demo

After reading the "two times function", let's look at "trigonometric functions", in fact, in our commonly used special effects, trigonometric functions can do more than two times. But today is only about "easing".

As I said before, you can basically make similar eases when you see a figure like this "hillside" shape. Then we take the first PI/2 part of the sin function, and we can see that he is also fully satisfied with the so-called slow motion of the graphical condition.

Moreover, the easing formula based on the SIN function is simpler than the two-time function. Because it is easier to get the formula of displacement relative time s-t:

/** 我们假设 每一帧 间隔时间为 dt， 那么在这个dt时间内 运动的距离为ds那么，假设一个物体 从 from 移动到 to 所花的时间为t， 则容易得出 在这个时间区间内用sin公式得到 每个dt的位移公式ds*/functiontween (from, to, t) {    // sin函数; ds = (to-from)*Math.sin(Math.PI*dt/(2*t));}

The rest of the work is to render the calculated current position to the page. Let's take a similar example here:
Sin Slow Demo

"Write it in the back."
Unconsciously also wrote so many, the so-called "will not be difficult", this article is actually involved in the technical skills actually not much, I spend so much space is also hoping to give the kinematics is not very understanding of the students a little help it.
I wish I could make the simple things clear, and I don't know if I can achieve this goal.

In fact, in the front-end work, there are some common mathematical and physical knowledge, but it is not difficult. It's easy to say. For example, the previous burst of Mac QQ Browser logo around the flashing stars. is to use a simple oval formula.
Http://hongru.github.com/test/qqbrowser/index.html

Java Web motion front end