Реализация эффекта авторизации «Tomorrow Ark»

React.js
Реализация эффекта авторизации «Tomorrow Ark»

я написалРегравировка внешнего интерфейса "Tomorrow's Ark", одна из страниц ежедневной регистрации имеет эффект прожектора, в этот раз мы разберем, как он реализован.

Демонстрация эффекта

Фактический эффект показан на рисунке, когда вы перемещаетесь в место в сетке, вокруг него возникает эффект прожектора:

В игре, кажется, используются статические текстуры, что может быть связано с тем, что в мобильной игре нет таких интерактивных действий, поэтому это выглядит немного неудовлетворительно.

В той же win10 есть аналогичный эффект:

На этот раз мы попытались добиться аналогичного эффекта в вебе.

Поддельный веб-календарь входа в систему:READ MORE+

Регравировка внешнего интерфейса "Tomorrow's Ark"Адрес статьи:READ MORE+

адрес демонстрации arknights-реагировать:READ MORE+

Исходный код ежедневной проверки arknights-react:READ MORE+

Реализовать идеи

Шаги разбиты на 4 шага.

1. Наслоение

Разделите два слоя: цифровой слой и слой сетки.

Наличие цифрового слоя поверх слоя сетки, вероятно, похоже на то, на что это похоже.

Фактический порядок расположения дома такой же, содержимое двух слоев перекрывается, и размер также одинаков.

2. Рисовать

Исходный контент рисуется на цифровом слое, а сетка рисуется на сеточном слое.

// react hook 
function Grid () {
  // 生成 60 个网格，其实多少无所谓，随便来。
 const [list, setList] = React.useState(
  Array.from({ length: 60 }, (_, i) => i + 1)
 )

 return (
  <div className="grid">
      <!-- 第一层：网格 -->
   <ul className="grid-list grid-border">
    { 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>
 )
}

ReactDOM.render(
 <Grid></Grid>,
 document.getElementById('root')
)

Эффект следующий

Синяя рамка представляет нашу сетку, а числа отображаются на отдельном слое.

копепен демо:READ MORE+

3. Показать маску

Добавьте маску для отображения.

Принцип заключается в использовании одного из четырех свойств маски для управления маской.

Кроме того, добавьте некоторые детали, чтобы обогатить его, чтобы текст по умолчанию был темным, а всплывающее — белым.

.grid-border {
  // mask 大小
  -webkit-mask-size: 240px 240px;
  // mask 不重复
  -webkit-mask-repeat: no-repeat;
  // mask 圆半径
  -webkit-mask-image: radial-gradient(circle, #fff, transparent 120px);
  // mask 位置
  -webkit-position: 0 0;
}

Эффект следующий:

копепен демо:READ MORE+.

4. Контролируйте движение маски.

Управляет движением маски.

В основном для управления положением маски, поэтому нам нужны две координаты (x, y), чтобы определить положение маски.

При этом мышь перемещается по сетке, а когда уходит, установить положение (x, y).

// react hook 实现
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)

    // 将遮罩移动到鼠标位置
    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)
    }

    //设置遮罩隐藏
    const handleMouseLeave = () => {
        setX(-500)
        setY(-500)
    }

    return (
        <div
            className='grid'
            onMouseMove={handleMouseMove}
            onMouseLeave={handleMouseLeave}
        >
            <ul
                ref={$border}
                className='grid-list grid-border'
                style={{
                    WebkitMaskPosition: `${x}px ${y}px`, // 此处设置 mask 样式
                    maskPosition: `${x}px ${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>
    )
}

// ...

Эффект следующий:

копепен демо:READ MORE+

Выше полный эффект!

Суммировать

Всего для создания эффекта календаря требуется 4 шага:

  1. Разделите два слоя: цифровой слой и слой сетки.
  2. Исходный контент рисуется на цифровом слое, а сетка рисуется на сеточном слое.
  3. Добавьте маску для отображения.
  4. Управляет движением маски.

Что касается других деталей макета страницы, я не буду их здесь представлять, если вы хотите узнать больше, вы можете прочитать исходный код или комментарий ниже.

Адрес источника

Поддельный веб-календарь входа в систему:READ MORE+

Регравировка внешнего интерфейса "Tomorrow's Ark"Адрес статьи:READ MORE+

адрес демонстрации arknights-реагировать:READ MORE+

Исходный код ежедневной проверки arknights-react:READ MORE+

Категории