Earlier I wrote a copy of ark of Tomorrow’s front interface, in which a daily check-in page has a spotlight effect, this time let’s analyze how it is implemented.

Results demonstrate

The actual effect is shown here. When you move to a place in the grid, a spotlight effect will appear around you:


In the game, it seems to be using static tiles, probably because mobile games don’t have such interactive actions, so it’s a little disappointing.


In the same Windows 10, there is a similar effect:


This time, we’ll try to achieve a similar effect on the Web.


Copepen: READ MORE+

The front interface of Ark of Tomorrow is recreated

Arknights – React demo address: READ MORE+

Arknights – React daily check-in source: READ MORE+

Implementation approach

The procedure is divided into four steps.

1. The hierarchical

Separate two layers, the digital layer and the grid layer.

This is what it feels like to have the digital layer on top of the grid layer.


The actual DOM is arranged in the same order, and the contents of the two layers overlap and are of the same size.

2. Draw

Draw the initial content in the digital layer and draw the grid in the grid layer.

CODE EXAMPLE// react hook 
function Grid () {
  // Generate 60 grids, no matter how many.
 const [list, setList] = React.useState(
  Array.from({ length: 60 }, (_, i) => i + 1))
 return (
  <div className="grid">
      <! -- Layer 1: grid -->
   <ul className="grid-list grid-border">
    { list.map(item => <li className="grid-item" key={item}></li>)}</ul>
      <! -- Layer 2: numbers -->
   <ul className="grid-list grid-num">
    { list.map(item => <li className="grid-item" tabindex="0" key={item}>{item}</li>)}</ul>
  </div>)}
ReactDOM.render(
 <Grid></Grid>.document.getElementById('root'))Copy the code

Results the following


The blue border represents our grid, while the numbers are shown in a separate layer.

Copepen demo: READ MORE+

3. Display mask

Add a mask display.

The principle is to control the mask with four of its attributes.

Add a little more detail so that the default text is dark and the float is white.

CODE EXAMPLE.grid-border{// mask size-webkit-mask-size: 240px 240px; // mask is not repeated-webkit-mask-repeat: no-repeat; // mask the circle radius-webkit-mask-image: radial-gradient(circle, #fff, transparent 120px); / / mask position-webkit-position: 0 0;
}
Copy the code

The effect is as follows:


Copepen demo: READ MORE+.

4. Control the mask movement.

Control mask movement.

We mainly control the position of the mask, so we need two coordinates (x, y) to determine the position of the mask.

Set the position of (x, y) while moving the mouse over the grid and away from it.

CODE EXAMPLEReact hook implementation
function Grid() {
    const [list, setList] = React.useState(
        Array.from({ length: 60 }, (_, i) => i + 1))
    const $border = React.useRef(null)
    const [x, setX] = React.useState(- 500.)
    const [y, setY] = React.useState(- 500.)

    // Move the mask to mouse position
    const handleMouseMove = (e) = > {
        e.stopPropagation()
        const rect = $border.current
            ? $border.current.getBoundingClientRect()
            : null

        setX(e.pageX - (rect ? rect.x : - 500.) - 150)
        setY(e.pageY - (rect ? rect.y : - 500.) - 150)}
    // Set mask hide
    const handleMouseLeave = (a)= > {
        setX(- 500.)
        setY(- 500.)} return ( <div className='grid' onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} > <ul ref={$border} className='grid-list grid-border' style={{ WebkitMaskPosition:` ${x}pxThe ${y}px', // set heremaskstylemaskPosition:` ${x}pxThe ${y}px`,}} > {list.map((item) => ( <li className='grid-item' key={item}></li> ))} </ul> <ul className='grid-list grid-num'> {list.map((item) => ( <li className='grid-item' tabindex='0' key={item}> {item} </li> ))} </ul> </div>)} // ...  Copy the code

The effect is as follows:


Copepen demo: READ MORE+

That’s the full effect!

conclusion

There are 4 steps to complete the calendar effect:

  1. Separate two layers, the digital layer and the grid layer.
  2. Draw the initial content in the digital layer and draw the grid in the grid layer.
  3. Add a mask display.
  4. Control mask movement.

Other page layout details are not covered here, but if you want to know more, you can read the source code, or you can comment below.

The source address

Copepen: READ MORE+

The front interface of Ark of Tomorrow is recreated

Arknights – React demo address: READ MORE+

Arknights – React daily check-in source: READ MORE+