Use Requestanimationframe for animation effect two

March is a good day, gradually began to busy, I am still not careful, plus a cold, no spirit, today almost another accident, did the thing or to check it again, oops.

Use requestanimationframe do animation, I did a long time, finally finished at the end of February, the middle around a lot of detours, first put Domo out:

The function to be implemented is obvious, at first I did not consider the performance of the rough, do not use Requestanimationframe, has been made, but feel bad, so the further improvement. Using the method of the object, Sir into 10 small pink squares, hide, and then use Requestanimationframe, every second to drop a small square, when the small square hit the bottom of the big square or disappear on the screen, then back to the beginning of the state, waiting for a new round of whereabouts. In the process of small square motion, it is necessary to detect the relationship between it and the generous block coordinates, if "hit" The score plus one, disappear, or continue to fall to the bottom.

Here are the problems encountered and solutions:

1. Generate 10 pink small squares, insert into the element, the first thought of the use of appendchild add elements, meaning that I would like to insert 10 times, we know that the direct operation of the DOM is very lossy performance, so I changed to this:

1           var pfragment = document.createdocumentfragment ();
2            for (var i=0;i<10;i++) {3              var dot=new  dot (); 4               Pfragment.appendchild (dot.dom);
5           } 6          View.appendchild (pfragment);

Document.body.appendChild () is called only once, which means that only one DOM operation is required, and the time will obviously be less than before.

2. The big square at the bottom, its coordinates to move with the mouse, the use of change its left value is not wise, should use translate change position, every time to get the distance of the mouse movement,

3. Set the attribute state to the small square, in the animation process, constantly according to the state's value, determine whether the small square can fall, let its whereabouts, or disappear, or return to the original status, of course, return to the original status is at the top of the screen, hidden, but its coordinates have been reassigned. Also according to the situation of the animation, timely change the value of state

In this step, I understand more about what is the object.

4. The collision of monitoring size blocks is achieved by contrasting their coordinates: The variable distance is the distance of the mouse movement and the distance of the generous block movement.

In a nutshell, the code is really a magical thing.

Use Requestanimationframe for animation effect two