Javascript for easing Effect

I. What is the easing effect?

Easing effect is commonly used in any software, especially inWebDevelopment.

The so-called easing effect means that the movement of elements is not uniform, but changes from fast to slow or from slow to fast. The easing effect can make the page look more luxurious and improve the quality of the webpage.

 

Ii. Principles

My implementation method of this easing effect comes from what everyone is very familiar.Flash. When creating an animation tween, the following options are available:

 

You can change the easing value on the Right To achieve the easing effect. When the value is positive, it is fast first and then slow. If the value is negative, it is slow first and then fast. Click Edit on the right side to view a curve about the easing degree.

When the easing value is zero, the easing curve is a straight line. In this case, the motion is a constant speed:

 

The easing value is positive (100), The slow motion curve is as follows. In this case, the movement is first fast, then slow:

 

The easing value is negative (-100), The slow motion curve is as follows. In this case, the movement is slow first and then fast:

 

Through these three images, we can get the principle of easing effect. Note: The horizontal coordinates of each graph are the number of frames for this action, and the vertical coordinates are the percentage of completed population. In general, the abscissa is time, and the ordinate is displacement. Is this line not the speed at which the object moves? This also confirms the motion states of three cases with different easing values.

 

III,JavascriptImplementation

Through observation, I think we can use the parabolic Function Curve to express the slow-moving curve.

SimilarlyJSMobileHtmlThe object speed can also follow this curve.

In order to make this logic generic, write the following method:EvalAnd various parameters to assign values to the specific values of the object. This can be a displacement pixel or a transparency.

 

// Sproperty: attributes to be set
// Nstart: the starting value of the attribute value.
// Nend: end value of the attribute value
// Ninterval: Total exercise time
// Nstep: Step time
// Fncallback : Delayed callback function
Function Buffermove (sproperty, nstart, nend, ninterval, nstep, fncallback ){
Oflag. ismoving =   True ;
// Rank indicates that the greater the order of a parabolic curve, the more obvious the Slow Movement. Generally, it is set to 2 or 3.
VaR Rank =   3 ;
// Calculate a in y ^ 2 = AX based on input parameters to determine the curve equation
VaR ARG = (Nend - Nstart) / Math. Abs (nend-nstart) * Math. Pow (math. Abs (nend-nstart), rank) / Ninterval;
VaR Curstep =   0 ;
VaR Setvalue =   Function (){
If (Curstep + Nstep > = Ninterval ){
Clearinterval (interval );
Eval (sproperty +   " = "   + Nend );

Oflag. ismoving= False;

If (fncallback)

Fncallback ();

} Else {
Curstep + = Nstep;
Eval (sproperty +   " = "   + (ARG / Math. Abs (ARG) * Math. Pow (math. Abs (ARG) * curstep), 1 / Parsefloat (rank. tostring ())) + Nstart ));
}
}
VaR Interval = Setinterval (setvalue, nstep );
}