Урок 12.2 · Интерфейсы и сайты с нуля · Модуль 12. Праздник на экране · По подписке
Цель урока: Собрать колесо из секторов, научить его плавно поворачиваться и останавливаться на нужном призе.
Нужно знать заранее: Уроки 4.2, 5.3 и 12.1
Зачем это нужно: Колесо фортуны — тот же приём, что подарок из прошлого урока, но с другой механикой: человек нажимает кнопку, колесо крутится и останавливается на призе. Так делают скидки, ежедневные награды и «крути и выиграй» в приложениях. На сайте платформы такое колесо стоит на странице «Колесо фортуны»: семь секторов с подписями, ступица со звездой и стрелка сверху. Нарисовать его можно без картинок и без библиотек: круг из цветных секторов, поворот и немного математики.
Как это работает: Секторы — это фон круга. conic-gradient красит круг по углам: первые 90 градусов одним цветом, следующие 90 — другим и так далее. Получаются четыре равных сектора, как четыре куска пирога. Белые полоски на границах — тоже часть градиента: четыре градуса белого, и круг выглядит колесом, а не четырьмя кусками. from -45deg сдвигает начало отсчёта: градиент начинает рисовать не с верхней точки, а на 45 градусов раньше. Поэтому под стрелкой в покое стоит середина первого сектора, а не шов между секторами — шов под стрелкой читается как «колесо сломано». Подписи — отдельные элементы поверх круга: четыре span с классом label, расставленные по сторонам (top, right, bottom, left). Они лежат внутри #wheel, поэтому поворачиваются вместе с ним — как подписи на настоящем колесе. Ступица — маленький круг со звездой в центре. Она закрывает место, где сходятся все секторы, и делает картинку похожей на колесо, а не на пирог. Поворот — это transform: rotate(180deg). Он поворачивает элемент вокруг центра. Плавность даёт transition: transform 3s — браузер сам замедляет поворот к концу, как настоящее колесо. Главное — посчитать угол. Сектор «Скидка 15 %» в покое стоит снизу: его середина — 180 градусов. Стрелка стоит сверху, то есть на нуле. Значит, колесо надо повернуть на 180 градусов, чтобы середина этого сектора встала под стрелку. Полные обороты добавляют «ощущение прокрутки»: 4 × 360 = 1440 градусов плюс наши 180. Угол накапливается (angle = angle + 1440 + 180), иначе каждый клик начинал бы поворот с нуля и колесо «отпрыгивало» назад. На сайте колесо нарисовано в SVG, а не градиентом: подписи и цвета приходят из настроек админки, поэтому картинку нельзя нарисовать заранее, а SVG даёт чёткие подписи в любом размере. Вид при этом тот же, что у нас: секторы, белые полоски, ступица со звездой и стрелка сверху.