مخروطی تدریجی چہرے کے ساتھ حقیقی وقت کی گھڑی بنانا

گریڈیئنٹس کافی عرصے سے CSS سپیکٹرم کا حصہ رہے ہیں۔ ہم بہت سارے پروجیکٹس میں بہت سارے ریڈیل اور لکیری میلان دیکھتے ہیں، لیکن ایک قسم کا میلان ہے جو تھوڑا سا تنہا لگتا ہے: مخروطی میلان. ہم اس قسم کے میلان کا استعمال کرتے ہوئے گھڑی کا چہرہ بنانے جا رہے ہیں۔

مخروطی میلان کے ساتھ کام کرنا

ہم جو کچھ بنا رہے ہیں وہ ایک گراڈینٹ پر مشتمل ہوتا ہے جس میں کلر ٹرانزیشن ایک سینٹر پوائنٹ کے گرد گھومتی ہے اور اس میں متعدد رنگ کی قدریں ہو سکتی ہیں۔ اس گھڑی کے کام کرنے کے لیے، ہم ایک مخروطی میلان کی زاویہ قدر بھی استعمال کریں گے جو گردش یا نقطہ آغاز کی وضاحت کرتا ہے۔ زاویہ کی تعریف a کا استعمال کرکے کی جاتی ہے۔ from قدر.

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

اس میں دلچسپ بات یہ ہے کہ سی ایس ایس میں ابتدائی زاویہ کی منفی قدر ہو سکتی ہے، جو بعد میں کام آئے گی۔

مخروطی میلان کی ایک سادہ خوبصورت مثال:

ہماری بنیادی گھڑی کی تعمیر

آئیے گھڑی اور ہاتھوں کے لیے کچھ 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 ہاتھوں پر تاکہ وہ صحیح طریقے سے گھڑی کے چہرے کے گرد گھوم سکیں۔ ہاتھوں پر زاویہ لگانے کے لیے کچھ حسب ضرورت خصوصیات بھی موجود ہیں جنہیں ہم جاوا اسکرپٹ کے ساتھ اپ ڈیٹ کریں گے تاکہ وقت درست ہو سکے تاکہ ہر ہاتھ سیکنڈوں، منٹوں اور گھنٹوں کے مطابق نقشہ بنائے۔

ہمارے پاس اب تک جو کچھ ہے وہ یہ ہے:

ٹھیک ہے، آئیے ان حسب ضرورت خصوصیات کو اپ ڈیٹ کرنے کی طرف بڑھتے ہیں!

ہماری بنیادی گھڑی کے لیے 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();

ہماری بنیادی گھڑی کا ورکنگ ڈیمو دیکھیں:

اسے مخروطی میلان پر لگانا

ٹھیک ہے، تو ہماری گھڑی کے ہاتھ کام کر رہے ہیں۔ جو ہم واقعی چاہتے ہیں وہ ان کو مخروطی میلان پر نقشہ بنانا ہے جو وقت کی تبدیلی کے ساتھ اپ ڈیٹ ہوتا ہے۔ آپ نے وہی اثر دیکھا ہوگا اگر آپ کے پاس "گریڈینٹ" چہرے کے ساتھ ایپل واچ ہے:

ایسا کرنے کے لیے، آئیے اپنے کو اپ ڈیٹ کرکے شروع کریں۔ .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 متغیر اس منفی نقطہ آغاز کی وجہ سے، ہماری آخری پوزیشن کو گھنٹے کے زاویے سے اپ ڈیٹ کیا جانا چاہیے، ابتدائی پوزیشن سے گھٹا کر۔

ہم وہاں جاتے ہیں - اب گھنٹہ اور منٹ کے ہاتھ تدریجی زاویوں پر سیٹ ہیں:

یہی ہے! لیکن اس سے آپ کو اس سے بھی آگے بڑھنے سے باز نہ آنے دیں۔ اپنی طرزیں بنائیں اور تبصروں میں میرے ساتھ ان کا اشتراک کریں تاکہ میں انہیں دیکھ سکوں۔