แอนิเมชันเส้นขอบ SVG: เตรียมเส้นทางวาดเส้นเดียว

แอนิเมชันเส้นขอบ SVG เผยเส้นได้โดยเลื่อนเส้นประตามพาธ ใช้ stroke-dasharray กำหนดเส้นประและช่องว่าง แล้วทำแอนิเมชัน stroke-dashoffset จนเส้นขอบมองเห็น MDN อธิบายเป็น คุณสมบัติวาดเส้นขอบ

พาธต้นฉบับกำหนดสิ่งที่ดูเหมือนกำลังวาด พาธเปิดตามเส้นทางปากกาผ่านกลางรอยได้ เส้นรอบรูปเติมอธิบายขอบรอย การเพิ่มเส้นขอบให้เส้นรอบรูปนั้นทำแอนิเมชันวิ่งรอบขอบ การตั้งเส้นประอย่างเดียวไม่เผยสีเติม

เริ่มด้วยรูปเล็กหนึ่งรูปก่อนตั้งเวลาทั้งโลโก้ ตัวอย่างเขียนเองด้านล่างแยกเส้นทางวาด งานเติมสี และเส้นรอบรูปเพื่อให้เลือกรูปทรงที่แอนิเมชันต้องการได้

หากต้องการย้ายทั้งไอคอนตามโค้ง ใช้ กระบวนการพาธเคลื่อนไหว SVG ซึ่งแยกเส้นทางเดินทางจากงานภาพ

เริ่มด้วยพาธเปิดที่มีเส้นขอบ

พาธที่เราสร้างนี้ไปขวาแล้วขึ้น fill ถูกปิด รอยที่เห็นจึงมาจากเส้นขอบทั้งหมด:

<div class="playing">
  <svg viewBox="0 0 140 130" role="img" aria-label="Open bent line">
    <path class="reveal route" pathLength="100" d="M30 90H100V30" />
  </svg>
</div>

ใช้ CSS นี้เพื่อเผยในสองวินาที:

.reveal {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
 
.route {
  fill: none;
  stroke: #147d78;
  stroke-width: 16;
  stroke-linecap: butt;
}
 
.playing .reveal {
  animation: draw 2s linear forwards;
}
 
@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
 
@media (prefers-reduced-motion: reduce) {
  .playing .reveal {
    animation: none;
    stroke-dashoffset: 0;
  }
}

pathLength="100" ปรับเทียบการทำงานที่ใช้ระยะให้มีความยาวที่กำหนด 100 เอกสารอ้างอิง pathLength อธิบายการทำเป็นมาตรฐานนี้ ค่าอาร์เรย์เส้นประค่าเดียวทำซ้ำเป็นเส้นประและช่องว่าง ดังนั้น 100 ให้เส้นประเต็มความยาวตามด้วยช่องว่างยาวเท่ากัน การเลื่อนแพตเทิร์น 100 ซ่อนเส้นขอบในตัวอย่างนี้ การเลื่อนเป็นศูนย์เผยเส้น

ใช้ตัวเลขไม่มีหน่วยที่นี่ stroke-dashoffset: 100% ใช้แทน 100 หน่วยพาธที่ทำเป็นมาตรฐานไม่ได้ เอกสารอ้างอิง dash-offset ของ MDN ระบุว่าเปอร์เซ็นต์ใช้เส้นทแยงมุมที่ปรับเป็นมาตรฐานของวิวพอร์ต SVG แทนความยาวพาธทั้งหมด

ตัวอย่างใช้ปลายตัดตรงให้ตรวจจุดเริ่มที่หยุดง่าย ปลายแบบอื่นเปลี่ยนรูปลักษณ์ปลายเส้นประได้ เลือกปลายตามงานแล้วตรวจเฟรมเริ่มกับสุดท้ายตามขนาดที่ไอคอนจะปรากฏจริง สำหรับลายซ้ำตกแต่ง เปรียบเทียบ เส้นรอบรูปจุดและระยะปลายเส้น ก่อนเลือกความยาวเส้นประกับช่องว่าง

เปรียบเทียบเส้นทางกับเส้นรอบรูปเติม

แถบหนาหักมุมอาจดูคล้ายเส้นขอบนั้นแต่มีรูปทรงต่างกัน พาธเขียนเองที่สองนี้เดินรอบขอบแถบและปิดด้วย Z:

<path class="reveal filled" pathLength="100"
  d="M30 82H92V30H108V98H30Z" />

ด้วยสีวาดต่อไปนี้ การเปลี่ยน dash offset ไม่มีผลที่เห็น:

.filled {
  fill: #ef8067;
  stroke: none;
}

แถบยังเติมสีเพราะไม่มีเส้นขอบให้ทำเส้นประ ข้อกำหนดการวาด SVG ของ W3C แยกการระบายภายในรูปทรงจากการวาดเส้นขอบ

หากตั้ง fill: none แทน เพิ่มเส้นขอบ และทำแอนิเมชันพาธปิดนั้น เส้นขอบตามเส้นรอบรูป: ไปตามขอบหนึ่ง ข้ามปลาย แล้วกลับตามอีกขอบ ไม่กลายเป็นเส้นทางเดียวผ่านกลางแถบ

ความต่างนี้อธิบายด้วยว่าทำไมผลลากพาธอาจให้ เส้นตัดคู่ ในแอนิเมชัน ผลไม่ต้องการอาจเป็นเส้นวิ่งรอบนอกของรอยปากกา หากเอฟเฟกต์ต้องมีเส้นกลาง ใช้ คู่มือ SVG เส้นเดียว ตรวจหรือเตรียมรูปทรงนั้น

ตรวจจุดเริ่ม กลาง และจบ

สำหรับตรวจตัวอย่างแบบหยุด ปิดแอนิเมชันแล้วตั้ง stroke-dashoffset เป็น 100, 50 และ 0 ค่าเหล่านั้นตรงจุดเริ่ม เผยครึ่งทาง และสถานะสุดท้ายของพาธที่ทำเป็นมาตรฐานนี้ ไม่ใช่เปอร์เซ็นต์ที่พิมพ์ในคุณสมบัติ CSS

เก็บทั้งสามเวอร์ชันในหน้าทดสอบเล็กพร้อมปุ่มสถานะเหล่านั้น ค่ากลางมีประโยชน์มาก: รูปสำเร็จดูคล้ายได้ แต่เส้นทางวาดเห็นชัดระหว่างเผย

เราตรวจพาธเขียนเองในเบราว์เซอร์ที่ offset 100, 50 และ 0 และรันแอนิเมชันสองวินาทีหนึ่งครั้ง แถบเติมยังเห็นขณะที่เส้นทางกับเส้นรอบรูปเผยต่างกัน การทดสอบสาธิตพาธที่สร้างเหล่านั้น ไม่ใช่ผลลาก PerfectVector หรือการทดสอบทุกเบราว์เซอร์

ตรวจสีวาดและสไตล์ที่คำนวณขององค์ประกอบจริงหากผลต่าง CSS เขียนทับแอตทริบิวต์การแสดงผลได้ และพาธที่ไม่มีเส้นขอบเห็นไม่สามารถสาธิตการเผยเส้นประ รายการตรวจเส้นขอบหาย ช่วยแยกปัญหาสีและแสดงผลก่อนปรับเวลาแอนิเมชัน

เลือกจุดเริ่มและลำดับพาธ

พาธแรกเริ่มที่ M30 90 เดินแนวนอนไป x=100 แล้วแนวตั้งไป y=30 ลำดับนั้นให้ทิศการเผย หากควรเริ่มที่ปลายบน เตรียมพาธตามทิศนั้นแทนสมมติว่าแอนิเมชันรู้การเคลื่อนปากกาที่ตั้งใจ

สำหรับโลโก้ที่มีรอยแยก เลือกพาธที่ควรปรากฏก่อนและตามหลัง การเริ่มแอนิเมชันเดียวบนทุกพาธให้เผยพร้อมกัน ลำดับต้องมีเวลาหน่วงชัดหรือจัดไทม์ไลน์อื่น ตรวจจุดตัดและส่วนซ้อนในสถานะหยุด เพราะรูปที่มาทีหลังปิดเส้นขอบที่ยังวาดอยู่ได้

ภาพที่มีพาธย่อยหลายส่วนไม่เชื่อมอาจต้องแยกเป็นองค์ประกอบเพื่อควบคุมเวลาที่มีประโยชน์ แยกงานออกแบบภาพจากการเลือกเส้นทางแอนิเมชัน การรวมชิ้นไม่เกี่ยวเพียงเพื่อให้เป็นพาธเดียวอาจเพิ่มเส้นเชื่อมที่ศิลปินไม่ตั้งใจ

ไลบรารีแอนิเมชันช่วยคุมลำดับได้ แต่อินพุตยังต้องมีรูปทรงถูก เอกสารแอนิเมชัน SVG ของ Motion ให้การวาดเส้นผ่านค่า pathLength ที่ทำแอนิเมชัน ตัวควบคุมไลบรารีนั้นเป็น API แยกจากการปรับเทียบ pathLength="100" ของ SVG โดยตรงที่ใช้ที่นี่ อย่าคัดลอกค่าจากตัวอย่างหนึ่งไปอีกตัวโดยไม่ตรวจ API

ให้มีงานสำเร็จโดยไม่ต้องเคลื่อนไหว

ตัวอย่าง CSS มี offset ศูนย์เป็นฐานและเปลี่ยนเฉพาะขณะแอนิเมชันทำงาน media query ลดการเคลื่อนไหวปิดการเผยและแสดงเส้นครบ คู่มือ prefers-reduced-motion ของ MDN อธิบายการตรวจความต้องการผู้ใช้

สำหรับการสาธิตโต้ตอบ ให้ตัวควบคุมผลนิ่งพร้อมปุ่มเล่นซ้ำ สำหรับไอคอนอินเทอร์เฟซ เก็บป้ายข้อความที่เห็นหรือชื่อที่เข้าถึงได้ซึ่งอธิบายการทำงาน แอนิเมชันไม่ควรเป็นวิธีเดียวที่ผู้อ่านรู้ความหมายกราฟิก

ทดสอบสถานะเริ่ม ถูกขัดจังหวะ และสำเร็จในตำแหน่งจริง หากไอคอนสำคัญยังมองไม่เห็นเมื่อแอนิเมชันไม่ทำงาน แก้สไตล์ฐานก่อนขยายเอฟเฟกต์ไปทั้งอินเทอร์เฟซ การสาธิตแยกสำเร็จไม่ยืนยันผลทุกเบราว์เซอร์ เทคโนโลยีช่วยการเข้าถึง หรือประสิทธิภาพ

เตรียมราสเตอร์โดยไม่รับประกันเส้นทางปากกา

หากไฟล์หลักเวกเตอร์หายและรอย PNG หรือ JPG แบนต้องการงานแก้ได้ กระบวนการแปลงภาพเป็นเวกเตอร์ของ PerfectVector เตรียม SVG สำหรับประเมินได้ เปรียบเทียบขอบรูป ช่องเปิด และพื้นที่แยกกับต้นฉบับ แล้วตรวจพาธดาวน์โหลดในโปรแกรมแก้ไข ใช้รูปทรงนั้นเป็นงานที่ตรวจรับก่อนวางแผนแอนิเมชัน

การแปลงเป็นเวกเตอร์ไม่ระบุลำดับปากกาเดิม สร้างไทม์ไลน์ หรือรับประกันพาธเส้นกลางเดียว หากการเผยต้องมีเส้นทางเดียวผ่านเส้นขอบ วาดหรือเตรียมอย่างตั้งใจ เก็บเวกเตอร์หลักเดิมเมื่อมี SVG ที่ฝังเพียงภาพราสเตอร์ต้อง ตรวจภาพฝัง ก่อนสมมติว่ารอยที่เห็นเป็นรูปทรงพาธแก้ได้

ยอมรับงานนิ่งก่อน แล้วจึงยอมรับลำดับวาด คู่มือแก้ไขในบล็อก ครอบคลุมการทำต้นฉบับให้สะอาดก่อนชั้นแอนิเมชัน

คำถามที่พบบ่อย

ทำไม SVG ยังเห็นตอนเริ่มแอนิเมชันเส้นขอบ? ตรวจว่าส่วนที่เห็นเป็นสีเติมไหม การตั้ง dash-array และ dash-offset ส่งผลต่อเส้นขอบ พื้นที่เติมจึงยังเห็นได้ขณะที่เส้นขอบซ่อน

ทำไมแอนิเมชันวาดรอบทั้งสองด้านของเส้น? พาธอาจอธิบายเส้นรอบรูปปิดรอบรอยหนา การวาดเส้นขอบพาธนั้นตามเส้นรอบรูป เตรียมเส้นทางวาดเปิดเมื่อเอฟเฟกต์ต้องการเส้นเดียวผ่านกลาง

ใช้ 100% แทนความยาวพาธทั้งหมดได้ไหม? ไม่ใช่ค่าทดแทนทั่วไปใน stroke-dashoffset เปอร์เซ็นต์อ้างอิงเส้นทแยงมุมวิวพอร์ตที่ทำเป็นมาตรฐาน ตัวอย่างใช้ pathLength="100" ของ SVG โดยตรงกับค่าเส้นประไม่มีหน่วย

แปลง PNG เป็น SVG แล้วพร้อมแอนิเมชันลายมือไหม? การแปลงไม่รับประกันลำดับปากกาหรือเส้นกลางอัตโนมัติ ตรวจรูปทรงผลและเตรียมพาธวาดกับเวลาแยก

แหล่งอ้างอิง

1. MDN — stroke-dasharray — นิยามความยาวเส้นประและช่องว่างสลับสำหรับวาดเส้นขอบ
2. MDN — stroke-dashoffset — อธิบายระยะเลื่อนแพตเทิร์นและกรอบอ้างอิงเปอร์เซ็นต์
3. MDN — pathLength — อธิบายการปรับเทียบระยะโดยตรงของพาธและเส้นขอบ
4. W3C — การวาด SVG — แยกพฤติกรรมเติมกับเส้นขอบ
5. MDN — prefers-reduced-motion — อธิบายความต้องการผู้ใช้ที่ใช้แสดงผลนิ่ง
6. Motion — แอนิเมชัน SVG — อธิบาย API วาดเส้นแยกของไลบรารี

ทดสอบเส้นทางหนึ่งที่จุดเริ่ม ครึ่งทาง และจบก่อนจัดลำดับทั้งงาน หากต้นฉบับเป็นรอยราสเตอร์ ให้ เตรียม SVG ที่แก้ได้สำหรับประเมิน ตรวจรูปทรง และวางแผนเส้นทางวาดแยก