יצירת שעון זמן אמת עם פני שיפוע חרוטי

מעברי צבע הם חלק מספקטרום ה-CSS כבר די הרבה זמן. אנו רואים הרבה שיפועים רדיאליים ולינאריים בהרבה פרויקטים, אבל יש סוג אחד של שיפוע שנראה קצת בודד: שיפוע החרוט. אנחנו הולכים ליצור לוח שעון באמצעות סוג זה של שיפוע.

עבודה עם שיפועים חרוטיים

מה שאנחנו עושים מורכב ממעבר צבע עם מעברי צבע המסובבים סביב נקודת מרכז ויכולים להיות בעלי ערכי צבע מרובים. כדי שהשעון הזה יעבוד, נשתמש גם בערך הזווית של שיפוע חרוטי שמגדיר את הסיבוב או נקודת ההתחלה. הזווית מוגדרת באמצעות a 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 עם הפנים "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;

כעת נוכל לעדכן את המשתנים שלנו עם JavaScript שוב:

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

נראה שיכולנו להיגמר בשלב זה, אבל יש מלכוד! חישוב זה עובד מצוין כל עוד מחוג הדקות הוא בעל זווית קטנה יותר מחוג השעות. שיפוע החרוט שלנו יתבלגן ברגע שבו מחוג הדקות עבר על פניו. כדי לתקן זאת, נשתמש בערך שלילי כנקודת התחלה. למרבה המזל, קל לזהות מתי זה קורה. לפני עדכון המשתנים שלנו נוסיף את הדברים הבאים:

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

על ידי חיסור 360 מזווית הדקות שלנו, אנו מסוגלים להגדיר ערך שלילי עבור שלנו startposition מִשְׁתַנֶה. בגלל נקודת התחלה שלילית זו, יש לעדכן את מיקום הקצה שלנו בזווית השעה, בהפחתת מיקום ההתחלה.

הנה - עכשיו מחוגי השעה והדקות מוגדרים לזוויות שיפוע:

זהו זה! אבל אל תתנו לזה למנוע מכם לקחת את זה אפילו רחוק יותר. צור סגנונות משלך ושתף אותי בתגובות כדי שאוכל לבדוק אותם.. הנה קצת השראה שתעזור לך: