สร้างนาฬิกาแบบเรียลไทม์ด้วยใบหน้าไล่ระดับทรงกรวย

การไล่ระดับสีเป็นส่วนหนึ่งของสเปกตรัม 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 โดยที่ใบหน้า "ไล่ระดับ" ทำงานอยู่:

ในการทำเช่นนี้ มาเริ่มด้วยการอัพเดทของเรา .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 ตัวแปร. เนื่องจากจุดเริ่มต้นเชิงลบนี้ ตำแหน่งสิ้นสุดของเราจึงควรอัปเดตด้วยมุมชั่วโมง ลบด้วยตำแหน่งเริ่มต้น

ไปเลย — ตอนนี้เข็มชั่วโมงและเข็มนาทีถูกตั้งค่าเป็นมุมไล่ระดับ:

แค่นั้นแหละ! แต่อย่าปล่อยให้สิ่งนั้นหยุดคุณไม่ให้ไปไกลกว่านี้ สร้างสไตล์ของคุณเองและแชร์กับฉันในความคิดเห็นเพื่อให้ฉันตรวจสอบได้.. แรงบันดาลใจเล็กๆ น้อยๆ ที่จะช่วยให้คุณดำเนินการต่อไปคือ: