How to do this lottery with a 3-D rotating disk along the Y-axis provides some ideas.

  css3, question


After sliding the screen, the disc starts to rotate along the Y axis. The side the disc sees is the prize map. Replace the prize map every time you turn it over. After stopping rotating, the prize of the current disc is the winning result!


  1. How to control to change one prize map for each turn;
  2. How to control the lottery process from slow to fast and finally stop;
  3. How to control the last stop side to be consistent with the winning result returned by the server.

I thought about it and solved it. The basic idea is:

Only one rotation element is set, and prize switching is realized by setting the content of the element in the rotation process.

The 360 rotation is divided into four animations, each animation cycle only rotates 90 degrees, and the animation execution in each animation cycle is set to be uniform. Set the element content to switch when the rotation angle is 90,270,450 …, because when the human eye sees the turntable, it is a line, which is the best time to switch the prize pattern.

At this time, there will be a problem: because the turntable is divided into front and back sides, for example, when the turntable is rotated 90 degrees, when the turntable is rotated from 90->180 degrees after switching, the human eye sees the back side of the turntable, and the prize map is reverse when viewed from the back side, so at this time, it is necessary to turn over the elements of the prize map 180 times, so even if the turntable is the back side, the prize map is positive when viewed. in the process of 270 -> 360, it is not necessary to turn over the prize map, and it can be judged according to the rotated angle.

Why consider setting the animation cycle to only 90 degrees each time? And each animation is set to a uniform speed?
This is because by writing a controller, the controller returns the duration of the next animation execution, and controls the return of the duration according to the number of times the animation has been executed: as the number of times increases, the duration of one animation is from 200ms (starting speed) -> 50ms (fastest) -> 500ms (slowest). thus, although the process of one animation is uniform, if the duration of the next animation execution is shorter, it seems that the next rotation is faster than the first, and the process of accelerating and decelerating can be achieved through multiple consecutive executions. I set up an animation here to rotate only 90 degrees, i.e. four different speeds in one rotation. the finer the 360 degree subdivision, the better the effect. I also perform perfectly when subdividing 90 degrees per unit. moreover, this can also be well matched with the judgment of switching prize timing 2n+1 90 degrees).

With the above thinking, the key is to consider how to judge the ending time of the last animation, so that the next animation can be called immediately after the end of the last animation.
Here, we can simply use the animate method provided by jquery. The last parameter is the callback method after the animation is finished. In the callback method, we can recursively call the animation written by ourselves to execute it. If you want to challenge, you can realize an animate. Google has many tutorials. I did it with promise.

Finally, you can set a minimum number of rotations, and when this number is reached, the pattern of winning results obtained by the server will be set on the turntable element, and then stop. ….

The appearance of the finished: