Easing Effect of JavaScript (Part 1)

Gentle movement. The learning name is tween, short for buffered movement. To switch the page content comfortably, use the fade-in and fade-out effects. To make the page elements move naturally, use the easing effect. These two combinations can be used to derive a variety of special effects. Thanks to Flash developers for doing so much research for us, we split them directly and packed them in various menus and albums. Let's start with the simplest things to accelerate and slow down.

Since it is slow, it must involve the following concepts: distance, time and speed. We can imagine that there is a straight line L. vertices A and vertices B are the start and end points of L. There is a point C moving on the straight line L from vertices A to B. The time required is generally unknown, but the speed must be determined. As shown in the figure below, we want to move the green square on the thin sliding belt. The upper-left corner of the slider is equivalent to a, and the upper-right corner is equivalent to B. The upper-left corner of the square is equivalent to point C, and the moving distance is the width difference between the two. Because the moving object has a width, that is to say, point C will never overlap with point B. But an accurate destination (point D for convenience) is necessary and we must calculate it. In acceleration, point C may surpass point D at any time. When point is exceeded, we need to stop this movement and pull point C back to point D.

Click the removable Green Box

To obtain the coordinates and dimensions of the pages, getcoords () and getstyle () are now available. Sorry, I really don't mean to show off my functions. What's more, getstyle () has been hacked into many things, and its power is not as powerful as before.

 // auxiliary function 1 var getcoords = function (EL) {var box = el. getboundingclientrect (), Doc = el. ownerdocument, body = Doc. body, html = doc.doc umentelement, clienttop = html. clienttop | body. clienttop | 0, clientleft = html. clientleft | body. clientleft | 0, Top = Box. top + (self. pageyoffset | HTML. scrolltop | body. scrolltop)-clienttop, Left = Box. left + (self. pagexoffset | HTML. scrollleft | body. scrollleft)-clientleft return {'top': Top, 'left': Left };}; // auxiliary function 2 var getstyle = function (El, style) {If (! + "\ V1") {style = style. replace (/\-(\ W)/g, function (all, letter) {return letter. touppercase () ;}); VaR value = el. currentstyle [style]; (value = "Auto") & (value = "0px"); return value;} else {return document. defaultview. getcomputedstyle (El, null ). getpropertyvalue (style) }}

how can we move it? In JavaScript, you only need to change it to an absolute positioning object and assign a value to top and left of the object. It will immediately move to the corresponding coordinates. Because Javascript is too efficient in processing location changes, it cannot make you feel "moving". It feels like you directly jump from point C to point D. Every time we move an object a little bit, we have to stop it and let the eyes have a shadow. According to the visual staying effect of human eyes, if the impression left by the previous portrait in the brain has not disappeared, the latter portrait will come one after another, and the difference between the two pictures is very small, there will be a feeling of "motion. So how millisecond is the most suitable? We should not only take care of people's eyes, but also take into account the display speed of the display and the rendering speed of the browser. Based on foreign statistics, 25 ms is the optimal value. In fact, we should remember this value as common sense. In retrospect, there seems to be a rule for Japanese animation that there are 30 pictures in 1 second, which is Chinese, which is relatively junk and 24 screenshots in 1 second. Divide by the number of sheets in one second to get the time of each stay. The 27.77 ms in Japan is very close to our 25 ms, because the rendering speed of the browser is obviously inferior to that of the TV, especially IE6. To achieve acceleration, let it move a little faster each time, and multiply the last moving distance by a number greater than 1.

 // helper function 3, equivalent to $ (), no $ symbol is used because jquery is used in the blog Park, which may cause naming conflicts. // my next-generation method for querying generation elements, with the cache capability var cache = [] VaR _ = function (ID) {return cache [ID] | (Cache [ID] = document. getelementbyid (ID);} // main function: Accelerate moving var accelerate = function (EL) {el. style. position = "absolute"; var begin = getcoords (EL ). left, distance = parsefloat (getstyle (_ ("taxiway"), "width")-parsefloat (getstyle (El, "width"), end = begin + distance, speed = 10; // The first moving speed, in Px/MS, implicitly multiplied by 1 ms (function () {setTimeout (function () {el. style. left = getcoords (EL ). left + speed + "PX"; // move speed * = 1.5; // The distance from the next move to If (getcoords (EL ). left> = END) {el. style. left = end + "PX";} else {setTimeout (arguments. callee, 25); // stay for every move for 25 milliseconds }}, 25)}) ()} 

It is easy to slow down when you understand acceleration. We give the first moving distance a large number, and then reduce each time, in other words, multiply by a number smaller than 1. But here is a note. What if it moves at a distance less than 1px ?! It is also less than 1px later. The browser will ignore this value and treat it as 0. In this way, it will stop in the middle. To prevent such a terrible event, we use math. Ceil to ensure that the minimum moving distance is 1 px, even if the last moving speed is reached.

 
// Main function: slowing down and moving var decelerate = function (EL) {el. style. position = "absolute"; var begin = getcoords (EL ). left, distance = parsefloat (getstyle (_ ("taxiway"), "width")-parsefloat (getstyle (El, "width"), end = begin + distance, speed = 100; // The first moving speed, in Px/MS, implicitly multiplied by 1 ms (function () {setTimeout (function () {el. style. left = getcoords (EL ). left + speed + "PX"; // move speed = math. ceil (speed * 0.9); // The distance from the next move to If (getcoords (EL ). left <= END) {el. style. left = end + "PX";} else {setTimeout (arguments. callee, 25) ;}}, 25 )})()}
 

currently, functions are still weak, mainly due to the lack of abstraction and formulation. If we overcome these shortcomings and cooperate with the slow-moving formula of the great god of Robert penner, we can achieve a variety of slow effects. This is what we will explain in the next part. We hope you can leave a message for your support.