Создание часов реального времени с конической градиентной гранью PlatoBlockchain Data Intelligence. Вертикальный поиск. Ай.

Создание часов реального времени с коническим градиентным циферблатом

Отметка времени: 19 сентября 2022 г., 8:58

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

Работа с коническими градиентами

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

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 с активным циферблатом «Градиент»:

Кредит: 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 хитрости