Js Spring Effect code

Although the spring effect is used, acceleration and deceleration between fixed-point coordinates must be realized.
Point-to-point movement should know how to do it. This is achieved by setting the left of the moving object.
The deceleration effect is generally obtained by dividing the current value by a coefficient (generally a positive integer) by the target value.
Then the current value is added with this step as the new current value, and the value is repeated until the current value is equal to the target value.
As the step size is getting smaller and smaller, and the step size is the moving value, the deceleration effect is achieved.
How can we achieve acceleration?
I thought of a method because I couldn't get the acceleration step corresponding to the deceleration step (or I couldn't think of a method,
First, calculate all the deceleration step values and put them in an array. As the deceleration step, the acceleration step is the reverse of the array (that is, the reverse ).
This part is mainly used in the SetStep () function. You can refer to the code.
Other parts are described in the Code.

Program code:
Code
Copy codeThe Code is as follows:
Var $ = function (id ){
Return "string" = typeof id? Document. getElementById (id): id;
};


Function addEventHandler (oTarget, sEventType, fnHandler ){
If (oTarget. addEventListener ){
OTarget. addEventListener (sEventType, fnHandler, false );
} Else if (oTarget. attachEvent ){
OTarget. attachEvent ("on" + sEventType, fnHandler );
} Else {
OTarget ["on" + sEventType] = fnHandler;
}
};

Var Class = {
Create: function (){
Return function (){
This. initialize. apply (this, arguments );
}
}
}

Object. extend = function (destination, source ){
For (var property in source ){
Destination [property] = source [property];
}
Return destination;
}


Var Bounce = Class. create ();
Bounce. prototype = {
// Container object, sliding object, original position, and moving range
Initialize: function (container, obj, iOrigin, iRange, options ){

This. _ obj = $ (obj); // sliding object
This. _ xo = parseInt (iOrigin); // coordinate of the central axis (that is, the original coordinate)
This. _ xt = 0; // target coordinate
This. _ xs = []; // target coordinate set
This. _ steps = []; // step set
This. _ fast = true; // whether to accelerate

This. Range = iRange | 0; // sliding Range (width)

This. SetOptions (options );

This. Step = parseInt (this. options. Step );
This. Time = parseInt (this. options. Time );
This. Zoom = parseInt (this. options. Zoom );
This. Reduce = !! This. options. Reduce;
This. Min = parseInt (this. options. Min );
This. Max = parseInt (this. options. Max );
This. onMin = this. options. onMin;
This. onMax = this. options. onMax;
This. onSide = this. options. onSide;

// Set the style
$ (Container). style. position = "relative ";
This. _ obj. style. position = "absolute ";
This. _ obj. style. left = this. _ xo + "px ";

If (this. Range> 0) this. Start ();
},
// Set the default attribute
SetOptions: function (options ){
This. options = {// Default Value
Step: 10, // sliding Change Rate
Time: 10, // sliding Delay
Zoom: 0, // scaling Change Rate
Reduce: true, // whether to zoom out
Min: 0, // minimum range
Max: 0, // maximum range
OnMin: function () {}, // The minimum execution time
OnMax: function () {}, // execute when the maximum value is reached
OnSide: function () {}// executed when the boundary is reached
};
Object. extend (this. options, options || {});
},
// Start from the axis
Start: function (iRange ){
ClearTimeout (this. _ timer );
// If iRange has a value, reset the sliding range.
If (iRange) this. Range = iRange;
// Determines whether the vertex has reached the minimum point
If (this. Reduce & (this. Range <= 0 | this. Range <= this. Min) {this. onMin (); return ;}
// Determines whether the maximum vertex has been reached
If (! This. Reduce & (this. Max> 0 & this. Range> = this. Max) {this. onMax (); return ;}
// Reset the position
This. _ obj. style. left = this. _ xo + "px ";
// Set the target coordinate set (iRange may change, so it must be set every time)
This. _ xs = [this. _ xo + this. Range, this. _ xo, this. _ xo-this. Range, this. _ xo];
// Set to acceleration
This. _ fast = false;
// Start segmented Movement
This. Set ();
},
// Start from the segmentation
Set: function (){
// Return after the target coordinates are reached
If (this. _ xs. length <= 0 ){
// Reset the range if the scaling change rate has a value
If (this. Zoom> 0) {this. Range + = (this. Reduce? -1: 1) * this. Zoom ;}
This. Start (); return;
}
// Obtain the target coordinate
This. _ xt = this. _ xs. shift ();
// The target coordinate is the central axis, indicating that the target coordinate is on the boundary.
If (this. _ xt = this. _ xo) this. onSide ();
// Set the step size
This. SetStep ();
// Start to move
This. Move ();
},
// Move
Move: function (){
ClearTimeout (this. _ timer );
// After the step is completed, the result is returned when the target coordinate is reached.
If (this. _ steps. length <= 0) {this. Set (); return ;}
// Execute mobile
This. _ obj. style. left = (parseInt (this. _ obj. style. left) + this. _ steps. shift () + "px ";
// Move cyclically
Var oThis = this; this. _ timer = setTimeout (function () {oThis. Move () ;}, this. Time );
},
// Set the step size
SetStep: function (){
Var iTemp = parseInt (this. _ obj. style. left );

// Note that it is from large to small
This. _ steps = [];

If (this. Step> = 1 ){
Var I = 0;
Do {
I = (this. _ xt-iTemp)/this. Step;
// The step size cannot contain 0
If (I = 0) {break;} else if (Math. abs (I) <1) {I = I> 0? 1:-1 ;}
This. _ steps. push (I = parseInt (I ));
ITemp + = I;
} While (true );
// If acceleration is enabled, reverse the step set.
If (this. _ fast) this. _ steps. reverse ();
}
// The acceleration and deceleration Are alternating, so we need to reverse each time.
This. _ fast =! This. _ fast;
}
};

Test html:
Copy codeThe Code is as follows:
<Style type = "text/css">
. Container {border: 1px solid #000000; height: 50px; width: 500px ;}
. Bounce {width: 10px; height: 10px; background: #000000; top: 20px ;}
</Style>
Fixed Range rebound:
<Div id = "idContainer" class = "container">
<Div id = "idBounce" class = "bounce"> </div>
</Div>
<Br/>
Range gradient rebound:
<Div id = "idContainer1" class = "container">
<Div id = "idBounce1" class = "bounce"> </div>
</Div>
<Br/>
Custom range rebound:
<Div id = "idContainer2" class = "container">
<Div id = "idBounce2" class = "bounce"> </div>
</Div>
<Br/>
Range:
<Input id = "aa" name = "" type = "text" value = "200" size = "8"/>
<Input id = "bb" name = "" type = "button" value = "start"/>
<Input id = "idFast" name = "" type = "button" value = "acceleration +"/>
<Input id = "idSlow" name = "" type = "button" value = "slowdown-"/>
<Input id = "idZoom" name = "" type = "button" value = ""/>

Test code:
Copy codeThe Code is as follows:
New Bounce ("idContainer", "idBounce", 250,200 );
Var o = new Bounce ("idContainer1", "idBounce1", 250,200 ,{
Zoom: 20, Max: 200,
OnMax: function () {o. Reduce = true; o. Start (200 );},
OnMin: function () {o. Reduce = false; o. Start (0 );}
});

Var o2 = new Bounce ("idContainer2", "idBounce2", 250 );
$ ("Bb"). onclick = function () {o2.Start (parseInt ($ ("aa"). value) || 200 );}
$ ("IdFast"). onclick = function () {if (-- o2.Step <2) {o2.Step = 2 }}
$ ("IdSlow"). onclick = function () {if (++ o2.Step> 20) {o2.Step = 20 }}
$ ("IdZoom"). onclick = function () {o2.Zoom = 50 ;}

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> javascript Spring Effect </title> </pead> <body> <style type =" text/css ">. container {border: 1px solid #000000; height: 50px; width: 500px ;}. bounce {width: 10px; height: 10px; background: #000000; top: 20px;} </style> fixed range rebound: range gradient rebound: Custom range rebound: range: <input id = "aa" name = "" type = "text" value = "200" size = "8"/> <input id = "bb" name = "" type = "button" value = "start"/> <input id = "idFast" name = "" type = "button" value = "acceleration +"/> <input id =" idSlow "name =" "type =" button "value =" -"/> <input id =" idZoom "name =" "type =" button "value =" ""/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]