Use requestAnimationFrame for animation effect 2. ppt 3D animation effect

Use requestAnimationFrame for animation effect 2. ppt 3D animation effect

March was a good day, and gradually started to get busy. I was still not careful enough to do things. I caught a cold and had no spirit. Today, I almost had an accident. I had to check what I had done.

I used requestAnimationFrame for animation. After a long time, I finally finished the animation by the end of February. I had a lot of detours in the middle. I first put domo out:

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 needed is obviously less than before.

2. The coordinates of the big square at the bottom must move with the mouse. it is unwise to change its left value. You should use translate to change the position and obtain the distance of the mouse each time,

3. sets the attribute state for the small square. During the animation process, the small square is constantly determined based on the state value to determine whether it can fall, let it fall, disappear, or return to the initial state. Of course, the returned initial state is hidden at the top of the screen, but its coordinates have been reassigned. It also changes the state value in a timely manner based on the animation situation.

At this point, I understand more about what objects are.

4. Monitoring the collision of large and small squares is achieved by comparing their coordinates: the distance variable is the distance between the mouse movement and the distance between the movement of large squares.

Simply put, the code is really amazing.