Easing Effect of javascript (Part 1)

In the previous article, the slow-moving Effect of Javascript (Part 1) abstracts the original slow-moving functions and reinforces them with the slow-moving formula. The effect of the finished product is amazing. Do not miss it when you pass.

Okay, so far. Ordinary acceleration and deceleration are hard to satisfy people. To realize the dazzling effects such as spring, the easing formula must be used. I have seen two sets of easing formulas, one of which is the easing formula built into the tween class by Robert Penner, but now people are increasingly recommending the tweenlite rookie. Another set is in script. aculo. us and mootools. Because mootools can be called an upgraded version of prototype, script. aculo. us is based on prototype and we call them prototype. The biggest difference from the flash genre is that they are better encapsulated and only need to input a parameter (0 ~ And has a strict queue mechanism to call various callback functions. For example, you can set the length and width of an element in the callback function to a Scale effect. We can use it to further create compound effects such as SlideUp, SlideDown, and Squish.

Let's take a look at the easing formula of the flash genre. They basically all have the following four parameters.

T: timestamp, which refers to the time period from the execution of the easing effect to the execution of the current frame, in ms.
B: beginning position, starting position
C: change. The distance to be moved is the end point minus the start point.
D: duration, the duration of easing effect.
We pass these four parameters into the slow-moving formula of Robert Penner, which calculates the Moving position of the object in the current frame. We can compare the original functions to rewrite them.

Var transition = function (el ){ Transition. linear = function (t, B, c, d) {return c * t/d + B ;}; // a slow-motion formula (Uniform Motion formula) is provided for free) El. style. position = "absolute "; Var options = arguments [1] || {}, Begin = getCoords (el). left, // start position Change = parseFloat (getStyle (_ ("taxiway"), "width")-parseFloat (getStyle (el, "width"), // distance to move Duration = options. duration | 500, // duration of the easing Effect Latency = options. latency | transition. linear, // The easing formula to be used End = begin + change, // end position StartTime = new Date (). getTime (); // execution start time (Function (){ SetTimeout (function (){ Var newTime = new Date (). getTime (), // the start time of the current frame Timestamp = newTime-startTime; // the elapsed time. El. style. left = trim (timestamp, begin, change, duration) + "px"; // move If (duration & lt; = timestamp ){ El. style. left = end + "px "; } Else { SetTimeout (arguments. callee, 25); // each move stays for 25 milliseconds } }, 25) })() }