एक शंकु ढाल वाले चेहरे के साथ रीयल-टाइम घड़ी बनाना

ग्रैडिएंट्स पिछले कुछ समय से 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 हाथों पर ताकि वे घड़ी के मुख के चारों ओर ठीक से घूमें। हाथों पर कोणों को सेट करने के लिए कुछ कस्टम गुण भी हैं जिन्हें हम सही समय प्राप्त करने के लिए जावास्क्रिप्ट के साथ अपडेट करेंगे ताकि प्रत्येक हाथ सेकंड, मिनट और घंटे के अनुसार मैप कर सके।

यहाँ हमारे पास अब तक क्या है:

ठीक है, आइए उन कस्टम गुणों को अपडेट करने के लिए आगे बढ़ते हैं!

हमारी मूल घड़ी के लिए जावास्क्रिप्ट जोड़ना

सबसे पहले, हम अपनी घड़ी को लक्षित करने जा रहे हैं और एक फ़ंक्शन बना रहे हैं:

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 वॉच सक्रिय है, तो आपने वही प्रभाव देखा होगा:

ऐसा करने के लिए, आइए अपना अपडेट करके शुरू करें .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 चर। इस नकारात्मक शुरुआती बिंदु के कारण, हमारी अंतिम स्थिति को घंटे के कोण से अद्यतन किया जाना चाहिए, प्रारंभिक स्थिति से घटाया जाना चाहिए।

वहाँ हम जाते हैं - अब घंटे और मिनट के हाथ ढाल कोण पर सेट हैं:

इतना ही! लेकिन इसे आपको और आगे ले जाने से न रोकें। अपनी खुद की शैली बनाएं और उन्हें मेरे साथ टिप्पणियों में साझा करें ताकि मैं उन्हें देख सकूं.. यहां आपको जाने के लिए एक छोटी सी प्रेरणा है: