The path of JS learning, the elastic motion frame

Source: Internet
Author: User

  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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.