ساخت ساعت بیدرنگ با صفحه شیب مخروطی

مدتی است که گرادیان ها بخشی از طیف CSS هستند. ما در بسیاری از پروژه ها شیب های شعاعی و خطی زیادی می بینیم، اما یک نوع گرادینت وجود دارد که به نظر می رسد کمی تنها باشد: گرادیان مخروطی. ما با استفاده از این نوع گرادیان یک صفحه ساعت می‌سازیم.

کار با گرادیان های مخروطی

چیزی که ما می سازیم شامل یک گرادیان با انتقال رنگ است که حول یک نقطه مرکزی می چرخد ​​و می تواند چندین مقدار رنگ داشته باشد. برای اینکه این ساعت کار کند، از مقدار زاویه یک گرادیان مخروطی نیز استفاده خواهیم کرد که چرخش یا نقطه شروع را مشخص می کند. زاویه با استفاده از a تعریف می شود from ارزش.

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

نکته جالب در این مورد این است که یک زاویه شروع می تواند یک مقدار منفی در CSS داشته باشد که بعداً مفید خواهد بود.

یک مثال زیبا ساده از یک گرادیان مخروطی:

ساختن ساعت اولیه ما

بیایید با افزودن مقداری HTML برای ساعت و عقربه ها شروع کنیم:

بیایید یک سبک پیش فرض برای ساعت خود ایجاد کنیم. برای اینکه این کار به درستی کار کند، بعداً متغیرهای CSS را با جاوا اسکریپت به‌روزرسانی می‌کنیم، بنابراین اجازه دهید این متغیرها را در داخل خود قرار دهیم. .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 بر روی عقربه ها به طوری که آنها به درستی در اطراف صفحه ساعت بچرخند. همچنین چند ویژگی سفارشی برای تنظیم زوایای عقربه‌ها وجود دارد که با جاوا اسکریپت به‌روزرسانی می‌کنیم تا زمان‌بندی درستی داشته باشیم تا هر عقربه بر اساس آن به ثانیه، دقیقه و ساعت نقشه‌برداری کند.

این چیزی است که ما تا کنون داریم:

خوب، بیایید به به روز رسانی آن ویژگی های سفارشی ادامه دهیم!

افزودن جاوا اسکریپت برای ساعت اولیه ما

ابتدا، ساعت خود را هدف قرار می دهیم و یک تابع ایجاد می کنیم:

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();

دمو کار ساعت اصلی ما را ببینید:

اعمال این بر روی یک گرادیان مخروطی

خوب، پس عقربه های ساعت ما کار می کنند. چیزی که ما واقعاً می خواهیم این است که آنها را به یک گرادیان مخروطی نگاشت کنیم که با تغییر زمان به روز می شود. اگر اپل واچ با چهره "Gradient" فعال باشد، ممکن است همین اثر را دیده باشید:

برای انجام این کار، بیایید با به روز رسانی خود شروع کنیم .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;

اکنون می توانیم متغیرهای خود را با جاوا اسکریپت دوباره به روز کنیم:

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

به نظر می رسد که ما می توانیم در این مرحله تمام کنیم، اما یک مشکل وجود دارد! تا زمانی که عقربه دقیقه عقربه زاویه کمتری نسبت به عقربه ساعت داشته باشد، این محاسبه خوب عمل می کند. شیب مخروطی ما در لحظه ای که عقربه دقیقه از آن عبور می کند، آشفته می شود. برای رفع این مشکل، از یک مقدار منفی به عنوان نقطه شروع استفاده می کنیم. خوشبختانه، تشخیص زمانی که این اتفاق می افتد آسان است. قبل از به‌روزرسانی متغیرهای خود، موارد زیر را اضافه می‌کنیم:

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

با تفریق 360 از زاویه دقایق خود، می‌توانیم یک مقدار منفی برای خود تعیین کنیم startposition متغیر. به دلیل این نقطه شروع منفی، موقعیت پایانی ما باید با زاویه ساعت به روز شود و با موقعیت شروع کم شود.

ما به آنجا می رویم - اکنون عقربه های ساعت و دقیقه روی زوایای گرادیان تنظیم شده اند:

خودشه! اما اجازه ندهید که شما را از ادامه این موضوع باز دارد. سبک های خود را ایجاد کنید و آنها را با من در نظرات به اشتراک بگذارید تا بتوانم آنها را بررسی کنم.