صنع ساعة في الوقت الحقيقي بوجه مخروطي متدرج

كانت التدرجات جزءًا من طيف 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 بها وجه "متدرج" نشط:

للقيام بذلك ، لنبدأ بتحديث ملف .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 عامل. بسبب نقطة البداية السلبية هذه ، يجب تحديث موضع النهاية بزاوية الساعة ، مطروحًا من موضع البداية.

ها نحن - الآن يتم ضبط عقارب الساعة والدقائق على زوايا متدرجة:

هذا هو! لكن لا تدع ذلك يمنعك من المضي قدمًا في هذا الأمر. قم بإنشاء أنماطك الخاصة وشاركها معي في التعليقات حتى أتمكن من التحقق منها .. إليك القليل من الإلهام لمساعدتك على المضي قدمًا: