Створення годинника реального часу з конічним градієнтним обличчям PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.

Створення годинника реального часу з конічною градієнтною гранню

Мітка часу: 19 вересня 2022 р., 8:58

Градієнти вже досить давно є частиною спектру CSS. Ми бачимо багато радіальних і лінійних градієнтів у багатьох проектах, але є один тип градієнта, який здається трохи самотнім: конічний градієнт. Ми збираємося створити циферблат, використовуючи цей тип градієнта.

Робота з конічними градієнтами

Те, що ми робимо, складається з градієнта з переходами кольорів, повернутими навколо центральної точки, і може мати кілька значень кольорів. Щоб цей годинник працював, ми також будемо використовувати значення кута конічного градієнта, який визначає поворот або початкову точку. Кут визначається за допомогою a from value.

background-image: conic-gradient(from 45deg, #6e7dab, #5762d5);

Що цікаво в цьому, так це те, що початковий кут може мати від’ємне значення в CSS, що стане в нагоді пізніше.

Простий елегантний приклад конічного градієнта:

Будуємо наш базовий годинник

Почнемо з додавання HTML для годинника та стрілок:

Давайте створимо стиль за замовчуванням для нашого годинника. Щоб це працювало належним чином, пізніше ми оновимо змінні CSS за допомогою JavaScript, тож давайте розглянемо ці змінні всередині нашого .clock селектор. Для зручності налаштування додамо також кольори рук.

.clock {
  /* general clock vars */
  --hour-hand-color: #000;
  --hour-hand-degrees: 0deg;
  --minute-hand-color: #000;
  --minute-hand-degrees: 0deg;
  --second-hand-color: hotpink;
  --second-hand-degrees: 0deg;

  position: relative;
  min-width: 320px;
  width: 25vw;
  height: 25vw;
  min-height: 320px;
  border-radius: 50%;
  margin: 0 auto;
  border: 7px solid #000;
}

/* clock hands */
.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  height: 45%;
  width: 4px;
  margin-left: -2px;
  background: var(--second-hand-color);
  border-radius: 6px;
  transform-origin: bottom center;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.second-hand {
  transform: rotate(var(--second-hand-degrees));
}
.hour-hand {
  height: 35%;
  border-radius: 40px;
  background-color: var(--hour-hand-color);
  transform: rotate(var(--hour-hand-degrees));
}
.minute-hand {
  height: 50%;
  background: var(--minute-hand-color);
  transform: rotate(var(--minute-hand-degrees));
}

Це налаштовує нас на загальний стиль, який нам потрібен для годинника. Ми встановили transform-origin на стрілках, щоб вони правильно оберталися навколо циферблата годинника. Там також є кілька настроюваних властивостей для встановлення кутів стрілок, які ми оновимо за допомогою JavaScript, щоб правильно визначити час, щоб кожна стрілка відповідала секундам, хвилинам і годинам.

Ось що ми маємо наразі:

Гаразд, перейдемо до оновлення цих властивостей!

Додаємо JavaScript для нашого основного годинника

По-перше, ми налаштуємо наш годинник і створимо функцію:

const clock = document.getElementById("clock");
function setDate() {
  // Code to set the current time and hand angles.
}
setDate();

Усередині нашої функції ми збираємося отримати поточний час за допомогою Date() функція для розрахунку правильного кута рук:

const now = new Date();
const secondsAngle = now.getSeconds() * 6; 
const minsAngle = now.getMinutes() * 6 + secondsAngle / 60;
const hourAngle = ((now.getHours() % 12) / 12) * 360 + minsAngle / 12;

Ось як працює цей розрахунок:

  • секунди: Беремо 60 секунд і множимо на 6, що трапляється 360, ідеальна кількість кутів у повному колі.
  • Хвилин: Те саме, що секунди, але тепер ми додаємо секундний кут і ділимо його на 60 щоб збільшити кут лише трохи протягом хвилини для більш точного результату.
  • Час роботи: Спочатку обчислюємо залишок години і ділимо його на 12. Потім ми ділимо цей залишок на 12 знову, щоб отримати десяткове значення, на яке ми можемо помножити 360. Наприклад, коли ми на 23 годині, 23 / 12 = remain 11. Розділимо це на 12 і отримаємо 0.916 який потім множиться на 360 на загальну суму 330. Тут ми зробимо те саме, що робили з хвилинами, і додамо кут хвилин, поділений на 12, для більш точного результату.

Тепер, коли у нас є наші кути, єдине, що залишилося зробити, це оновити змінні нашого годинника, додавши наступне в кінці нашої функції:

clock.style.setProperty("--second-hand-degrees", secondsAngle + "deg");
clock.style.setProperty("--minute-hand-degrees", minsAngle + "deg");
clock.style.setProperty("--hour-hand-degrees", hourAngle + "deg");

Нарешті, але не менш важливо, ми будемо запускати функцію з інтервалом у секунду, щоб отримати робочий годинник:

const clock = document.getElementById("clock");
function setDate() {
  // etc.
}
// Tick tick tick
setInterval(setDate, 1000);
setDate();

Перегляньте робочу демонстрацію нашого базового годинника:

Застосовуючи це до конічного градієнта

Отже, стрілки нашого годинника працюють. Що ми справді хочемо, так це відобразити їх на конічний градієнт, який оновлюється зі зміною часу. Можливо, ви спостерігали такий самий ефект, якщо у вас Apple Watch з активним циферблатом «Gradient»:

Кредит: Macworld

Для цього давайте почнемо з оновлення нашого .clock елемент із конічним градієнтом і двома спеціальними властивостями, які керують початковим і кінцевим кутами:

.clock {
  /* same as before */

  /* conic gradient vars */
  --start: 0deg;
  --end: 0deg;

  /* same as before */

  background: 
    conic-gradient(
      from var(--start),
      rgb(255 255 255) 2deg,
      rgb(0 0 0 / 0.5) var(--end),
      rgb(255 255 255) 2deg,
      rgb(0 0 0 / 0.7)
  );
}

Ви можете трохи пограти з цим, щоб створити його так, як вам подобається. Я додав деякі додаткові кольори в градієнт на свій смак, але якщо у вас є початкова та кінцева точки, ви готові.

Далі ми оновимо наш setDate() оновлює змінні для наших початкової та кінцевої точок на конічному градієнті. Початковою точкою буде наша секундна стрілка, яку легко знайти, тому що вона буде такою ж, як кут наших хвилин. Щоб зробити цей кінець годинниковою стрілкою, ми повинні зробити нашу кінцеву точку такою ж, як і hourAngle змінної в сценарії, але відніміть від неї нашу початкову точку.

let startPosition = minsAngle;
let endPosition = hourAngle - minsAngle;

Тепер ми можемо знову оновити наші змінні за допомогою JavaScript:

clock.style.setProperty("--start", startPosition + "deg");
clock.style.setProperty("--end", endPosition + "deg");

Здається, на цьому ми можемо закінчити, але є підступ! Цей розрахунок працює добре, якщо хвилинна стрілка має менший кут, ніж годинна стрілка. Наш конічний градієнт стане безладним, коли хвилинна стрілка пройде повз нього. Щоб виправити це, ми будемо використовувати від’ємне значення як відправну точку. На щастя, це легко помітити. Перш ніж оновлювати наші змінні, ми додамо наступне:

if (minsAngle > hourAngle) {
  startPosition = minsAngle - 360;
  endPosition = hourAngle - startPosition;
}

Шляхом віднімання 360 з нашого кута хвилин, ми можемо встановити від’ємне значення для нашого startposition змінна. Через цю негативну початкову точку наше кінцеве положення має бути оновлено на годинний кут, віднімаючи початкове положення.

Ось і ми — тепер годинна та хвилинна стрілки налаштовані на градієнтні кути:

Це воно! Але нехай це не завадить вам піти далі. Створюйте власні стилі та діліться ними зі мною в коментарях, щоб я міг їх перевірити.. Ось невелике натхнення, щоб ви рухалися:

Часова мітка:

Більше від CSS-хитрощі