This is the 12th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.

preface

About [SSD series] : Some interesting content on the front end, aimed at 3-10 minutes, 500-1500 words, gain without being tired.

Nugget draw, not in the grand prize, their own recovery UI, in a grand prize to meet their own, incidentally encapsulate a library.

If you hit 100, write an article about the turntable lottery and encapsulate a library.

Results demonstrate

PC

Analog mobile terminal

The source code

LuckDraw source

  1. Contain encapsulating library
  2. Contains the UI

Lottery analysis

It’s a lottery. It’s a smoke screen. Before and after the animation is to enhance some of the experience, to seek a little excitement, fantasizing about being the winner of the award.

Common manifestations

There are two common lucky draw performance, nine lattice and dial, dial and turn the pointer and turn the dial two. From the realization of difficulty, the turntable is greater than the nine grid.

General implementation

  1. Set the background color or mask of the grid interval, the further back the interval is larger.
  2. Rotary table
    1. Pure script control: turn the dial or pointer for each period of time, the further back, the less rotation.
    2. CSS animation: calculate the rotation Angle well in advance, with CSS3, use the bezier function, soha.

General logic processing

  1. Animation first is to execute the animation, get the result, and then decide where to freeze.
  2. The result first gets the result and then starts the animation.

A brief analysis of mining site technology

BuiltWith Technology Profiler: BuiltWith Technology Profiler: BuiltWith Technology Profiler: BuiltWith Technology Profiler: BuiltWith Technology Profiler: BuiltWith Technology Profiler: BuiltWith Technology Profiler: BuiltWith Technology Profiler Let’s take a look at the Nuggets.

Look at DOm nodes that are familiar__nuxtanddata-vIt’s true.

A brief analysis of the gold drawing

The gold draw belongs to the typical nine grid, in the middle is the draw button.

layout

In a typical Flex layout with nine squares and nine Turntable-ItemDivs, the lottery button uses a separate lottery style tag.

Animation first or results first?

Draw interface is https://api.juejin.cn/growth_api/v1/lottery/draw, we open the control panel, Network plate, input the draw filter please request.

Execute once and then block the draw request.

Again, it’s obvious that the animation was executed first, so I infer that the animation came first. As for the truth, does it matter? Not important, anyway I also don’t draw ！！！！！！

Implementation approach

We use the animation-first scheme, start the animation first, request the result in the middle, get the result, execute the hit animation.

The basic idea

1. The number of 0-N pit positions, if the nine grid, is 0-7 pit positions, pit things can be repeated.

2. Start the animation to switch grids uniformly and request the service interface at the same time.

3. After receiving the result, the winning animation calculates the number of the hit prize and executes the deceleration logic.

The separation of logic

This is the basic idea, in order to generality, we need to think a little more, the lottery is important is the logic, the surface form is important? It’s not that important, so we’re encapsulating the lottery logic here to provide variability and to provide notification of events.

Variability variability is generally achieved through parameters and external exposure methods, and we are no exception.

  1. The number of grids, not just the nine grids, 10 grids, 12 grids are supported
  2. The starting position, it doesn’t have to be 0
  3. It starts at a time interval, and then it gets slower and slower
  4. At least the number of rotations. If the interface is too fast, it may feel like it’s over before it starts.
  5. After getting the result, our deceleration animation logic should be built in and can be overwritten.

Event notification

Possible events throughout the process:

  1. OnStart: // When start
  2. OnUpdate: // Rotate once
  3. OnEnded: / / the end
  4. OnError: / / exception

So let’s put it all together, and it looks something like this. It’s very simple.

    var defaultOption = {
        startIndex: 0.// Initial position
        pits: 8./ / grid number
        interval: 100.// Initial interval
        rate: 2.5./ / coefficient
        cycle: 5.// Basic number of rotations: the minimum number of rotations required before entering the draw
        getInterval: null // Customize the rotation interval function
        //onStart: null, // when start
        //onUpdate: null, // rotate once
        // Ended: null, // ended
        //onError: null // Exception, such as the number of rotations has reached the set value, but no prizes are set
    };
Copy the code

Use the code

Utility methods

Encapsulate two add methods, one to add the selected class and one to remove the selected class.

function removeChosenClass() {
    var el = lotteryEl.querySelector('.turntable-item.chosen');
    if (el) {
        el.classList.remove('chosen'); }}function addChosenClass(index){
    lotteryEl.querySelector('.turntable-item.turntable-item-' + index).classList.add('chosen');
}
Copy the code

instantiation

Lottery is our encapsulated logic class.

var options = {
};
var lottery = new Lottery(options);
Copy the code

Register for startup events and mock winners

Pit 4 is the big prize

var btnStart = document.querySelector(".turntable-box .turntable-item.lottery");
btnStart.addEventListener('click'.function () {
    lottery.start();
    setTimeout(() = > {
        setPrize();
    }, 800)})function setPrize() {
    lottery.setPrize([4]) // Pit number 4 is the big prize
}

Copy the code

Listen to lucky draw events

lottery.onUpdate = function (ins, index, times) {
    removeChosenClass();
    addChosenClass(index);
}

lottery.onEnded = function (ins, index, prizeIndexes) {
    removeChosenClass();
    addChosenClass(index);

    setTimeout(function () {
        dialogEl.classList.remove("hide");
    }, 500)}Copy the code

At this point, use the code, regardless of the framework.

Logical library encapsulation

The complete code of the logic library is located in Lottery logic lottery.js, I will not post it all, otherwise it violates my principle of 500-1500 words, just post a simple attribute map.

summary

Isn’t that easy? It doesn’t look that hard.

Write in the last

Do not forget the original intention, [SSD series], 3-5 minutes, 500-1000 words, something, but not tired, if you feel good, your praise is the biggest motivation for me to move forward.

The technical exchange group, please come here. Or add my wechat cloud-dirge and study together.