The example explains the Javascript easing effect.

Here we will discuss the implementation of the slow Javascript effect, which seems to have no practical function, in fact, the cornerstone of implementing more diverse types of slow Javascript effects.

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 work naturally, use the Javascript 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 is required for convenience. 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.

Acceleration

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.

01. // Auxiliary function 1 02. var getCoords = function (el){ 03.    var box = el.getBoundingClientRect(), 04.    doc = el.ownerDocument, 05.    body = doc.body, 06.    html = doc.documentElement, 07.    clientTop = html.clientTop || body.clientTop || 0, 08.    clientLeft = html.clientLeft || body.clientLeft || 0, 09.    top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop, 10.    left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft 11.    return { 'top' : top, 'left' : left }; 12. }; 13. // Auxiliary function 2 14. var getStyle = function (el, style){ 15.    if (!+ "\v1" ){ 16.      style = style.replace(/\-(\w)/g, function (all, letter){ 17.        return letter.toUpperCase(); 18.      }); 19.      var value = el.currentStyle[style]; 20.      (value == "auto" )&&(value = "0px" ); 21.      return value; 22.    } else { 23.      return document.defaultView.getComputedStyle(el, null ).getPropertyValue(style) 24.    } 25. }

So 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.

01. // Auxiliary function 3, equivalent to $ (). The $ symbol is not used because JQuery is used in the blog Park, causing Name Conflict. 02. // My new generation of query Generation Element Method with cache capability 03. var cache = [] 04. var _ = function (id){ 05.    return cache[id] || (cache[id] = document.getElementById(id)); 06. } 07. // Main function: accelerate mobile 08. var accelerate= function (el){ 09.    el.style.position = "absolute" ; 10.    var begin =  getCoords(el).left, 11.    distance = parseFloat(getStyle(_( "taxiway" ), "width" )) - parseFloat(getStyle(el, "width" )), 12.    end = begin + distance, 13.    speed = 10; // The first moving speed, in px/ms, implicitly multiplied by 1 ms 14.    ( function (){ 15.      setTimeout( function (){ 16.        el.style.left = getCoords(el).left + speed + "px" ; // Move 17.        speed *= 1.5; // The next moving distance 18.        if (getCoords(el).left >= end){ 19.          el.style.left = end + "px" ; 20.        } else {        21.          setTimeout(arguments.callee,25); // Every move stays for 25 milliseconds 22.        } 23.      },25) 24.    })() 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.

01. // Main function: Slow down and move 02.   var decelerate = function (el){ 03.     el.style.position = "absolute" ; 04.     var begin =  getCoords(el).left, 05.     distance = parseFloat(getStyle(_( "taxiway" ), "width" )) - parseFloat(getStyle(el, "width" )), 06.     end = begin + distance, 07.     speed = 100; // The first moving speed, in px/ms, implicitly multiplied by 1 ms 08.     ( function (){ 09.       setTimeout( function (){ 10.         el.style.left = getCoords(el).left + speed + "px" ; // Move 11.         speed = Math.ceil(speed * 0.9); // The next moving distance 12.         if (getCoords(el).left <= end){ 13.           el.style.left = end + "px" ; 14.         } else {        15.           setTimeout(arguments.callee,25); 16.         } 17.       },25) 18.     })() 19.   }

At present, functions are still weak, mainly because of the lack of abstraction and formulation. If we overcome these shortcomings and cooperate with the slow-moving formula of Robert Penner, we can achieve a variety of slow effects.

Original article title: Gentle javascript Effect

Link: http://www.cnblogs.com/rubylouvre/archive/2009/09/16/1566699.html

1. What is JSON? Data format prepared for JavaScript
2. 10 most commonly used JavaScript udfs
3. Some extended thoughts on loading JavaScript events
4. Summary of JavaScript usage: From BOM and DOM
5. How ExtJS works on Android Simulators