The encapsulation process of JS motion framework (example code

Let me give you a question. From starting point A to destination B, it took a total of 1000 milliseconds, each time is 30 milliseconds. What information did you get here?

What information is there?

The first one, the total duration is: 1000 milliseconds

The second one, how often does it take to walk? 30 milliseconds

The third one, the total number of walks: 1000/30

The fourth one, the distance: B-A

The fifth one, the step size: distance/total number of times

The implementation idea of ​​the motion framework is to change left, top, width, and height within a certain period of time, and stop after reaching the destination.

You can think about it first, How to make the div move on the page?

Think as follows: 1. When setting the div, it is absolutely positioned, because only after absolute positioning, the left, top and other values ​​will be displayed on the page. Otherwise the div will not be visible on the page.

            2. You can set a click event for the div, define the total number of steps count, the total distance dis, and the speed step=dis/count in the function. You also need to set a current number of steps and initialize it n =0

              3. Then use the timer setInterval() to get the current distance of the div and let it move.

The specific code is as follows:

& LT; script type = "text/javascript" & gt;

var odiv = document. GetelementByid ('DIV1'); ## DIV.ONCLICK = FUNCTION () {
Var Count = PARSEINT (1000/30);
# // 500-0;
//Distance
                              var step = dis/count;//                         var n = 0; //
The current number of steps
#                                                                                                                                            oDiv.style.left = n*step + 'px';                                                                                         

But the div will not stop and keeps moving. That is because there is no movement termination condition set for it. In the above code, we have set the current number of steps and the total number of steps. When the current number of steps and the total number of steps are consistent, and then clear the timer, can the div be stopped?
When the number of steps reaches 500, the div will stop at 500.

The improved code is as follows:


window.onload = function(){

var oDiv = document.getElementById('div1 ');

var timer;

var dis = 500-0;//distance

var step = dis/count;

//speed
var n = 0;//The current number of steps
        timer = setInterval(function(){                         n++;                         oDiv.style .left = n*step +'px';

# // Judging the conditions, when the current number of steps and the total steps are the same, then the div can stop if (n == Count) {
Clearinterval (timer)
            };
              },30)
               
   

We can use functions to encapsulate the motion process

# & lt; script type = "text/javascript" & gt;
Window.Onload = Function () {
VAR ODIV = Document.getelementByid ('DIV1');
VAR. Timer;

            obj is the object obtained, name is the Left, Top, Width, and Height values ​​​​of the div, target is the final destination, and dur is the total duration
                                                                                                                       target,dur){
              var count = parseInt(dur/30);
              var start = obj.offsetLeft;//Save the starting position of the div on the page in the variable
var dis = target - start;//dis is the distance
var step = dis/count;
var n = 0;
timer = setInterval (function(){
                                                                                                               When consistent, then div Just stop. ,30)
} }

                      move(oDiv,'top',100,1000)                                                                                                                                                                                    

The above is the detailed content of The encapsulation process of JS motion framework (example code. For more information, please follow other related articles on the PHP Chinese website!