The principle and realization of slow motion

Animation is to a certain frequency to change the attributes of the elements, so that the most common animation is the constant speed of the animation, each increment fixed value. Easing is used to modify the value of each increment, so that it increases in an irregular way, to achieve the animation changes.

The program realizes the linear motion without acceleration of the easing action

The mathematical formula is: f(x)=x , the code is as follows:

function () {   returnfunction  (percentcomplete) {      return  PercentComplete;   };} ;

Gradually accelerating slow-entry movement

The mathematical formula is: f(x)=x^2 , the code is as follows:

function (Strength) {   returnfunction  (percentcomplete) {      return Math.pow (PercentComplete, strength*2);   } ;

Gradual deceleration of the slow-out movement

The mathematical formula is: f(x)=1-(1-x)^2 , the code is as follows:

function (Strength) {   returnfunction  (percentcomplete) {      return 1-math.pow (1-percentcomplete, strength*2);   } ;

Ease-in and ease-out motion

The mathematical formula is: f(x)=x-sin(x*2π)/(2π) , the code is as follows:

function () {   returnfunction  (percentcomplete) {      return Percentcomplete-math.sin (PERCENTCOMPLETE*2*MATH.PI)/(Math.PI);   } ;

Spring Motion

The mathematical formula is: f(x)=(1-cos(x*Npasses * π) * (1-π))+x npassed represents the number of times a moving object crosses the middle axis. The code is as follows:

function (passes) {   = passes | | 3;    return function (percentcomplete) {       return ((1-math.cos (PercentComplete * Math.PI * passes)) *               ( 1-percentcomplete) + percentcomplete;   };} ;

Bouncing Sport

Nbounces表示运动物体被弹起的总次数，弹起的次数为偶数的时候，数学公式为：

f (x) = (1=cos (x nbouncesπ) * (1-π)) +x

弹起的次数为奇数的时候，数学公式为：

F (x) =2-(((1-cos (xπnbounces)) * (1-x) +x)

代码如下：

function (bounces) {    var fn = animationtimer.makeelastic (bounces);         return function (percentcomplete) {            = fn (percentcomplete);             return percentcomplete <= 1? percentcomplete:2-PercentComplete;        

Resources

• JQuery easing Plugin

The principle and realization of slow motion