background
Online a nine grid raffle, can share more details, write an article to record.
I’m sure you’ve seen all kinds of raffles. Probability, right? But they feed back to the user with some tense transition effects. For example,
At this point, we thought that the front end could control the lottery probability in a god-like way, but after checking the requirements, we realized that the winning prize was returned by the server interface.
This makes it awkward, and it’s much harder to write a fake scroll to a given gift than a straight front random.
Based on this starting point, I plan to make a public lottery method to quickly build a similar business scenario.
By the way, the project used imgCook, an intelligent code generation tool, and it worked pretty well so I could just focus on the business
The complete development process is detailed in previous articles,
The source code will also be posted below, already published to NPM. Follow with a link.
Lucky draw
The design will look something like this.
As we can imagine, the basic function is to click the effect to run the lantern along the direction shown.
Some people here may ask, why let us use our imagination to develop? To show you.
Ok, great. I forgot to bring my watermelon knife to work today.
Since the UI doesn’t give me an animation effect, I’m sure that when you see this grid, by default, you’ll think of running like a lantern, and running clockwise. Maybe you’ve seen too many of these effects to be surprised.
From the design draft, and to implement our imagination, the required function is to run the lantern speed from slow to fast, then from fast to slow, and finally slowly stop to the server before returning to the gift.
Let’s make a list of what we have
- A list of gifts returned by the server in order
- Id of the winning gift returned by the server
- Design draft (can be directly intelligent generation)
Make a list of the effects we need to achieve
- Palace running horse light effect
- Go from slow to fast, then fast to slow
- The last stop of the lantern is the designated position
- Extend some features (e.g., break, redraw)
We started to formulate specific development ideas. The business of development is not to heap code up first, but to develop after systematic consideration and technical research.
Research and development steps
Intelligent generation code imgCook
We first input the sketch source file to generate the original code, which needs to deduct the middle nine-grid module, because we need to customize the development there.
The principle is to generate schema source code through sketch directory structure, and then generate standard module code through schema parsing.
The resulting style looks something like this. Attach the portal again.
Ps: I added the Mosaic later
Lucky draw nine grid layout
There is a problem here, the order of the ninth grid is clockwise, we use what kind of layout to layout the ninth grid is a problem.
We have two assumptions here.
Flex layout
If we used flex layout to design the box model, the nine grid layout would be in this order
When running clockwise, the corresponding array index blinks as 1, 2, 3, 6, 9, 8, 7, 4, 1…
It’s a very difficult arrangement.
In terms of data structure design, we prefer to maintain a regular data state. For example: 1,2,3… , regular state can be corresponding to the value of the loop Array index, more convenient to do some processing.
However, the line has not been broken, and we still have two options
- Change the order of the array so that it runs clockwise in the order of the lantern to the ordered queue.
- Separate maintenance running light sequence array, mapping contrast array.
I think these two methods are not good, layout level problems as far as possible with layout to solve. If js needs to make up some loopholes because of the unreasonable layout design, it is a very inappropriate choice, which proves that our design is not reasonable, and the design idea contains compromise.
With the Flex layout getting limited results, let’s move on to the second layout
Locate the layout
For a first thought, positioning layouts can do this. Take a look at the code
We control the position by controlling the className, and the CSS lists the location data for each prize box.
However, there are some problems with this line
- If it’s not a 9 space but a 99 space, you need to customize 99 positions.
- If you need to adjust the location of the gift, the maintenance cost is high
- We need to maintain a separate set of coordinate arrays.
In contrast to the first Flex assumption, the core contradiction is not resolved because a separate set of logic still needs to be maintained. This is the opposite of what we started with.
So we took our analysis and went ahead and hypothesized.
The grid layout
Here we first “re” to popularize the grid layout, why to popularize it, because grid layout just launched, because the layout is novel many people are to contact and use the specific business, but the effect is not very good, because a lot of compatibility problems are incompatible.
Grid is a CSS shorthand property that can be used to set the following properties:
Explicit grid attributes grid-template-rows, grid-template-columns, and grid-template-areas, Implicit grid attributes grid-auto-rows, grid-auto-columns and grid-auto-flow, spacing attributes grid-column-gap and grid-row-gap
Grid layout compatibility now looks like this
We use grid grid layout to achieve our nine grid layout, the code and the effect is as follows
The results were as we expected, and there was no need to maintain one more set of logic to handle the layout.
Let CSS take care of it.
The data structure
Bessel curve problem.
As mentioned above, we have a requirement like this: we need to run the speed from slow to fast, from fast to slow.
The first problem we have with data is something like slow animation, so let me explain why it’s similar. Because our initial design is to change the parameters to control the current flashing position. If required by speed, then only the “rate” of variable change is required.
What is slow animation? Let’s look at the formula for slow animation:
Begin = BEGIN + (end-begin)/easing coefficient
Jquery animate allows you to control the speed of BEGIN by changing the animate coefficient. However, this can achieve a slow effect.
Bessel curve formula is a slow formula.
The easing function specifies the speed at which the animation effect is executed to make it look more realistic.
Real objects move at a certain pace, not fast at first. When we open a drawer, we first speed it up, then slow it down. When something falls, it first falls faster and faster, hits the ground, bounces back, and eventually hits the floor again.
Some preset easing functions are often used in CSS. Such as:
We often use these functions to develop some transitional effects. In this article I choose quadratic Bezier curve formula to achieve our slow running horselight effect.
The mathematical formula is as follows:
Generates a JS function based on a mathematical formula. The function takes three parameters
- Starting point coordinates
- Control point coordinates
- Anchor point coordinates
The function is as follows:
Let’s preset some necessary parameters and states
So what we need is a gentle curve for point that looks something like this, not too violent, but gentle
Coordinate of corresponding control point can be calculated according to auxiliary tool. So we have an early form of the easing function
With the slow function, we can control the “rate”. Further, it can be imagined that when the speed of the horselight slows down, if the data returned by the slow function is close to minSpeed, we can determine whether the current position is the winning position, and then we can do the next demand —- to stop at the specified position.
Let’s talk about the code side of the design.
Schema design
First, we want this lottery method to be decoupled from the public method and not coupled to the business.
So the location information that the component needs is designed to be injected.
You can imagine what apis we need to design
- Init configures the parameter function
- Start triggers the start function and has a hook function.
- End ends the callback function
- Subcribe subscriptions (although injection is recommended, subscriptions still need to be open)
- Hoc high order injection function
The API execution stage is also relatively simple, init configuration parameters before execution, trigger start method, end end callback to return the current endId, the component through subcribe or hoc to obtain the current location and other information.
Here I choose to design usage first, after design source code. The usage demo is as follows:
You can see that the start method contains an action hook that returns the status, end position, and other parameters.
My specific code is as follows:
The final result
The final result is as follows:
Summary.
A sweepstakes feature like this isn’t that hard, and I don’t think I would get any improvement if I rushed to write code just thinking about how to implement the business. So careful design, careful summary. Finally, give yourself a question.
To be, or not to be: that is the question —William Shakespeare
NPM address: www.npmjs.com/package/ext…
I hope that the things I settle for later are not necessarily “big” things, but things I do with my heart.
Previous articles are recommended
Part of the Transition to Better User Experience
How to improve team Productivity through UI Intelligent Code Generation
Bye bye