Официальное открытие! Вот как рассчитываются ваши цвета...

внешний интерфейс JavaScript
Официальное открытие! Вот как рассчитываются ваши цвета...

автор:imyzf

Ваш круг друзей выглядел так в прошлую среду?

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

Небольшой спойлер: в этой статье речь пойдет о логике расчета результата, которую вы больше всего хотите узнать в конце.

весь кадр

H5 этого события фактически представляет собой одностраничное приложение (SPA), которое использует react-router для управления маршрутизацией и содержит 13 страниц, включая домашнюю страницу, страницу вопроса, страницу результатов и другие части, каждая из которых является страницей. . между страницамиreact-transition-groupРеализуйте эффект переключения постепенного появления и исчезновения и используйте холст, чтобы реализовать анимацию переключения, аналогичную перемещению занавеса между рассматриваемыми страницами.

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

  • Оптимизируйте опыт, нажмите, чтобы сразу открыть следующую страницу, без процесса загрузки
  • На многих страницах есть видео, и узлы DOM должны быть загружены заранее, чтобы пройтиclickтриггер событияvideoВоспроизведение тега также реализует предварительную загрузку видео.

Как показано на рисунке, следующая страница будет загружена раньше, скрытая под текущей страницей.

эффект анимации

На этой странице событий используется множество эффектов движения для улучшения взаимодействия с пользователем. Методы использования в основном делятся на следующие две категории:

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

Далее мы представим несколько крутых анимационных эффектов.

эффект перелистывания страниц

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

Как показано на рисунке, после того, как пользователь инициирует операцию щелчка для перехода на следующую страницу, мы используем закрытую область серой маски, образованную пятью точками P1-P5, для покрытия текущей страницы. где P4 и P5 — неподвижные точки, определяющие правую границу. Эффект вытягивания достигается за счет непрерывного перемещения координат по оси X точек P1, P2 и P3 влево и изменения значений контрольных точек кривой Безье. Используемый здесь основной API холста:bezierCurveToметод.

Облачная анимация

В вопросе 5 на заднем плане есть облачная анимация, эта часть основана наthree.jsРеализация с использованием WebGL для рендеринга. Облака здесь используют материал шейдера (ShaderMaterial) для загрузки вершинного шейдера и шейдера фрагментов, рендеринга текстуры, а затем перемещения положения камеры для имитации эффекта челнока. Расположение каждого облака здесь случайное, и разные люди видят его по-разному.

падение анимации

В 7 вопросе будут кнопки и предметы выпадающие при входе на страницу Здесь используется физический движок.Matter.jsМоделируются свободное падение и эффекты столкновения. Место падения здесь также случайное, с тысячами людей и тысячами лиц, что более реально.

расчет результата

Далее мы покажем, как рассчитываются результаты теста.

1. Каждый вариант имеет соответствующее количество цветов, например, первый вопрос:

  • Вариант А: золотой, зеленый
  • Вариант B: фиолетовый, серебристый, оранжевый
  • Вариант C: розовый, синий

2. Мы зафиксируем выбор каждой темы, и в финальном расчете будут подсчитаны соответствующие цвета. Например, если для первого вопроса выбран вариант A,金и绿Добавьте по 1 к каждому.

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

4. Если это один цвет, в качестве результата возьмите цвет с наибольшим количеством отдельных цветов.

5. Если это два цвета, в качестве результата взять цвет с наибольшей суммой двух цветов, например, предположим橙+金Сумма подсчетов является наибольшей, а результат равен橙+金. Конечно, комбинации здесь ограничены, а предустановленных комбинаций всего 9, поэтому результаты расчета ограничены этими 9 типами.

6. Если при сортировке встречается цвет или комбинация с одинаковым результатом суммирования, результат будет принят в соответствии с приоритетом, заданным планирующими одноклассниками. Например, в монохроматическом случае предположим,橙и金все 5 и будут считаться в соответствии с橙>金приоритет, взять橙за результат.

Общий процесс показан на следующем рисунке:

流程图

Например, выбор друга:

[B, C, A, C, C, C, C, A]

Тогда его количество цветов равно

{ '紫': 3, '银': 6, '橙': 3, '金': 3, '绿': 2, '粉': 2, '蓝': 3 }

Так как для последнего вопроса было выбрано «Романтика», результат двухцветный, суммированный по приоритету,金+橙максимум (исключая несуществующие комбинации результатов), поэтому результат金+橙.

Всего в этом тесте3^7*2=4374пути выбора с 7 одноцветными результатами и 9 двухцветными результатами, всего 16 результатов.

Монохроматические результаты:

['绿', '橙', '银', '紫', '蓝', '金', '粉']

Двухцветный результат:

['粉金', '金橙', '粉紫', '金蓝', '金紫', '橙粉', '蓝粉', '金绿', '橙绿']

Поскольку общее количество результатов относительно контролируемо и его не нужно рассчитывать в сочетании с другими фоновыми данными (такими как личные данные пользователя), логика расчета выполняется во внешнем интерфейсе, и копия встроенного дисплея конфигурации считывается. В разработке этого мероприятия не участвовали студенты бэкенда.

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

виньетка

Также стоит упомянуть, что в логике расчета этого результата цвет не сопоставляется с соответствующим английским языком, а везде используется китайский язык. Например, в результирующем конфигурационном файле китайский ключ используется напрямую:

export default {
    蓝: {
        attracted: ['橙粉', '粉金'],
        keepAway: ['金', '银'],
        ......
    }
}

В настоящее время поддержка Unicode в JS достаточно хороша и даже поддерживаетИмя переменной Юникода, После того, как разработка была завершена, мы провели тест на совместимость с минимальной версией Android 5.0 и не обнаружили никаких проблем.На самом деле, мы не столкнулись с какими-либо проблемами в этом отношении после выхода в интернет.

В меньшем коде используются даже имена классов на китайском языке:

.金 {
    background: rgb(228, 198, 114);
}

в соответствии сРелевантная информацияПоказывает, что символы Unicode поддерживаются в качестве имен атрибутов класса, начиная с HTML 4.01. Конечно, поскольку в этом проекте включен модуль CSS, китайские имена классов здесь будут преобразованы в простые английские хеш-строки, независимо от проблем совместимости.

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

Эпилог

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

Эта статья была опубликована сКоманда внешнего интерфейса NetEase Cloud Music, Любое несанкционированное воспроизведение статьи запрещено. Мы набираем front-end, iOS и Android круглый год.Если вы готовы сменить работу и любите облачную музыку, присоединяйтесь к нам на grp.music-fe(at)corp.netease.com!

Категории