My Front story----Roulette (+﹏+) ~

Blink of an eye, immediately again to the Mid-autumn festival, suddenly think of the day has to do activities ~ Every holiday will be the tradition of activities is our front-end responsibility, last year I introduced the game machine, tycoon, that this year's activities to a roulette lottery bar ~ Actually this thing in the PC end has rotten Street, countless demo, Plug-ins can help us to achieve this function, so I also go with the crowd to find a well-known jQuery plug-in to achieve this function, but I do the mobile side of the development ... Usually basically is native JavaScript to do development, at most last Zepto, for this function on a jquery always feel not so authentic, but now jquery compression down only 38K, Think or try to try, the results found that the card is dying ... Roulette on iOS equipment to turn up can see, to some Android can simply not see, for this is operating a lot of spit groove ... So simply decided to make a forget, I do not believe that a roulette can be so card!

Say dry, because usually use said before nuts do scaffolding, so JS above can use ES6 to do development, so I this plugin also use ES6 syntax to write, detailed use method please refer here. My plugin supports two methods, therotate () method is used to manipulate elements, and getrotateangle () can take the angle at which the element was last stopped.

In simple terms, the use is still very intuitive, in the initialization of the setting of the starting angle, rotation angle and rotation time, you can wait for the callback function on time to execute the ~ principle everyone should understand, then how can it be on the mobile side to ensure high performance? In fact, I used to introduce the requestanimationframe to do this animation ~

First, we initialize the variables, I first use ele to cache the incoming element node, and then get the browser style styles , rotation animation I still use the transform property to do, in order to compatibility, I need to know what prefix the current browser supports transform, in order to facilitate storage, I first put the transform in the form of a string, and then in the filter The supportedcss method iterates through the specific properties supported by the browser and is stored in the variable.

These two sentences are very key! Because we use the 3D transform, so we need these two properties to speed up our animation, in fact, the principle is very simple, through these two properties, we can let our animation call the device's GPU to render, which will greatly improve the rendering effect.

This is based on the rotation function of the requestanimationframe , it does not stop the recursive execution of animation, until the condition is satisfied to exit, in this function we need to pass in parameters to control its transformation curve, about the curve transformation of the knowledge point, Before the big God in the circle has a very detailed introduction, interested can go to search ~ In this function I did not directly to manipulate the DOM node, but through the _animate () to do the real rotation.

Finally we return two functions, we can in the two functions here to pass the parameters of some preprocessing or calibration, etc., I am here in fact, in addition to assembling objects, and did not do too much processing, interested students can change their own to try ~

Everywhere ~ This simple roulette component is done ~ very simple ~ The idea is still relatively clear, the key point is to use the request animation frame to do the rotation logic, in addition, through the style of the properties of the animation to enable the GPU rendering, which two points on the mobile side can greatly improve the performance of our components, OK ~ Come here today ~ when I think of more fun activities to record it ~ (￣︶￣)

Source code please see Github:https://github.com/f-happy/mobile-wheel-of-fortune

My Front story----Roulette (+﹏+) ~