[SSD] Лотерея Nuggets: «Снести ее», затем реализовать одну и, кстати, инкапсулировать библиотеку.

внешний интерфейс JavaScript
[SSD] Лотерея Nuggets: «Снести ее», затем реализовать одну и, кстати, инкапсулировать библиотеку.

Это 12-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления.

предисловие

о примерно【Серия твердотельных накопителей】:
Некоторый интересный контент на переднем плане, нацеленный на 500-1500 слов за 3-10 минут, чтобы что-то получить, не уставая.

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

Если тебе это нравится100, напишите еще статью про лотерею вертушек, и кстати инкапсулируйте библиотеку.

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

Сторона ПК

luckDraw_d.gif

Моделирование мобильного

luckDraw_m.gif

исходный код

Исходный код удачи

  1. Включить библиотеку-оболочку
  2. Включить пользовательский интерфейс

Краткий анализ лотереи

Лотерея — это просто уловка. Анимация до и после предназначена для того, чтобы усилить впечатления, найти немного волнения и представить, что я могу стать обладателем главного приза.

общие проявления

Есть два распространенных лотерейных исполнения:Цзюгунгеа такжеПроигрыватель, проигрыватель имеетПоверните указательа такжеповернуть проигрывательдва вида. С точки зрения сложности реализации проигрыватель больше, чем Jiugongge.

Общая реализация

  1. Цзюгунге
    Установите цвет фона или маску интервала, чем дальше интервал, тем больше будет интервал.
  2. Проигрыватель
    1. чистое скриптовое управление: каждый период времени вращайте диск или указатель, чем дальше назад, тем меньше вращение.
    2. css анимация: Хорошо рассчитать угол поворота заранее, сотрудничать с css3 и эффективно использовать функцию Бесселя, шпилька.

Общая логическая обработка

  1. анимация первая
    Это сначала выполнить анимацию, получить результаты в течение периода, а затем решить, где заморозить.
  2. результат первый
    Сначала получите результат, затем запустите анимацию.

Технический анализ сайта Nuggets

Вот небольшой анализ стека технологий Nuggets и рекомендуем один из них.BuiltWith Technology Profilerсоздается chrome, который может анализировать, на каких технологиях построен сайт. Давайте посмотрим на Наггетс.

image.png

Взгляните на то, с чем знаком узел DOm.__nuxtа такжеdata-v, это действительно так.image.png

Краткий анализ лотереи Наггетс

Лотерея Nuggets представляет собой типичную сетку из девяти квадратов с кнопкой лотереи посередине.

макет

Типичная гибкая компоновка, девять сеток, девятьturntable-itemdiv, кнопка рисования использует отдельныйlotteryтег стиля.

image.png

Сначала анимация или сначала результаты?

Интерфейс лотереи естьhttps://api.juejin.cn/growth_api/v1/lottery/draw, открываем панель управления, раздел Сеть, вводимdrawФильтр по запросу.

Выполните один раз, затем заблокируйте запрос на лотерею.

image.png

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

luckDraw_block.gif

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

Мы принимаем схему «сначала анимация», сначала запускаем анимацию, запрашиваем результат в середине и выполняем анимацию попадания после получения результата.

Основная идея

1. Нумерация
0-nЯма, в случае Jiugongge,0-7Яма, а вещи в яме могут повторяться.

image.png

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

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

логика разделения

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

изменчивость
Изменяемость обычно достигается с помощью параметров и открытых методов, и мы не исключение.

  1. Поддерживается количество сеток, а не только девять сеток, 10 сеток и 12 сеток.
  2. начальная позиция, не обязательно с 0
  3. Начальный интервал времени, после которого становится все медленнее и медленнее
  4. По крайней мере, количество оборотов, если интерфейс слишком быстрый, может показаться, что он заканчивается, не начавшись.
  5. После получения результата наша логика анимации замедления должна быть встроена и может быть переопределена одновременно.

уведомление о событии

Возможные события в процессе:

  1. onStart: // при запуске
  2. onUpdate: // повернуть один раз
  3. onEnded: // конец
  4. onError: // исключение

Собираем все воедино, наверное, вот так, очень просто.

    var defaultOption = {
        startIndex: 0, // 初始位置
        pits: 8,  // 格子数
        interval: 100, // 初始间隔
        rate: 2.5,  // 系数
        cycle: 5,  //转动基本次数：即至少需要转动多少次再进入抽奖环节
        getInterval: null // 自定义旋转间隔函数
        //onStart: null, // 当开始
        //onUpdate: null, // 旋转一次
        //onEnded: null,  // 结束
        //onError: null  // 异常, 比如转动次数已经达到设定值, 但是没有设置奖项
    };

использовать код

инструментальный метод

Сначала инкапсулируйте два метода добавления: один для добавления выбранного класса, а другой для удаления выбранного класса.

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');
}

создавать экземпляр

Лотерея — это наш инкапсулированный логический класс.

var options = {
};
var lottery = new Lottery(options);

Зарегистрируйтесь для участия в Kickoff Events и симулируйте выигрыш

Яма 4 - джекпот

var btnStart = document.querySelector(".turntable-box .turntable-item.lottery");
btnStart.addEventListener('click', function () {
    lottery.start();
    setTimeout(() => {
        setPrize();
    }, 800)
})

function setPrize() {
    lottery.setPrize([4]) // 4号坑位是大奖
}

Мониторинг лотерейных событий

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)
}

Пока использование кода полное, независимое от фреймворка.

Инкапсуляция логической библиотеки

Полный код логической библиотеки находится по адресуЛогика лотереи Lottery.js, все выкладывать не буду, а то это будет противоречить моему принципу 500-1500 слов, поэтому просто выкладываю простенькую карту атрибутов.

image.png

резюме

Не правда ли, все не кажется таким уж сложным.

напиши в конце

Не забывайте первоначальный замысел, [серия SSD], 3-5 минут, 500-1000 слов, есть что набрать, но не устать, если вы считаете, что это хорошо, ваши лайки и комментарии - самая большая мотивация для мне двигаться вперед.

Пожалуйста, посетите группу технического обменаиди сюда. Или добавьте мой облачный сервис WeChat и учитесь вместе.

Категории