The path of JS learning, the elastic motion frame

　　Elastic motion: As the name implies, it is like the acceleration deceleration movement in physics, when the speed is too high at the beginning, the speed does not stop immediately, but moves forward a distance, then moves in the opposite direction, so reciprocating.

varTimer=NULL; varSpeed=0; //The speed must be put on the outside, in the words, each speed is starting from 0 instead of keeping the results of the last execution        functionMove () {timer=setinterval (function(){                /*if (odiv.offsetleft<300) {speed+= (300-odiv.offsetleft)/50;                    Divided by 50 is because the speed is too high}else{speed-= (odiv.offsetleft-300)/50;} Here the two sentences in the If,else are the same after the sentence simplification is the same//both SPEED=SPEED+300/50-ODIV.OFFSETLEFT/50//So if , else statements can be omitted*/ Speed=speed+300/50-odiv.offsetleft/50; ODiv.style.left=odiv.offsetleft+speed+ ' px '; },30); }

Elastic motion is often used in combination with friction motion, the effect is better, friction movement, that is, the speed is getting smaller, calculated, more humane, in line with the conventional visual friction and elastic motion formula:

speed+= (Target-obj.offsetleft)/5;
speed*=0.7;

There are several problems with the elastic games:

1) Unable to reach the specified position-----decimal error problem
2) How to solve? Speed cannot be rounded, use a perverted method----set the value to be changed to a variable

Flexible menu;
1) Elastic motion over boundary problem: The reason is that when the element value is too small, it will cross the bounds, the speed will be negative, can be negative speed, the speed is set again
is 0, but it does not solve the problem fundamentally. So be cautious with elastic motion
15, in the use of elastic motion, sometimes the problem of sports festivals, so sometimes try to avoid the use of elastic motion, but with buffer movement

varLeft=0; varSpeed=0;//The speed must be outside, otherwise it's not the result of every execution.       　　 functionMove (Obj,target) {clearinterval (Obj.timer); Obj.timer=setinterval (function() { speed+ = (target-obj.offsetleft)/5; speed*=0.7; /*obj.style.left=obj.offsetleft+speed+ ' px '; There is an error in this notation, one Li will be more or less pieces, so change to a custom variable left, as below*/ Left+=Speed ; //To improve efficiency and avoid wasting resources, turn off the timer                if(Math.Abs (speed) <1 && math.abs (left-target) <1) {                    //The judging condition is that the distance is close enough and the speed is small enough to use absolute valueclearinterval (Obj.timer); Obj.style.left=target+ ' px '; //just in case, when the timer is closed, the card is in the corresponding position.}Else{obj.style.left=left+ ' px '; } document.title=obj.offsetleft+ ' | ' +target+ ' | ' +Speed ; For testing},30);

The path of JS learning, the elastic motion frame