0Pricing
Sveltejs Academy · บทเรียน

transition:draw สำหรับเส้นทาง SVG

ทำให้เส้น SVG เคลื่อนไหวทีละส่วนด้วยการเปลี่ยนภาพ draw

transition:draw สำหรับเส้นทาง SVG เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน

ทรานซิชันการวาด

ทรานซิชัน draw สร้างภาพเคลื่อนไหวให้เส้นพาธของ SVG โดยค่อย ๆ เปิดเผยเส้นเหล่านั้น

การนำเข้า

มาจาก svelte/transition

import { draw } from "svelte/transition";

ใช้กับพาธ

แนบกับองค์ประกอบ SVG <path> ที่มีเส้นขอบ

<svg viewBox="0 0 100 100">
  {#if visible}
    <path transition:draw={{ duration: 1000 }} d="M10,50 L90,50" stroke="black" />
  {/if}
</svg>

ต้องมีเส้นขอบ

พาธต้องมีเส้นขอบที่มองเห็นได้ พาธที่มีเฉพาะพื้นที่เติมสีไม่สามารถวาดได้

ระยะเวลาและการปรับจังหวะ

เช่นเดียวกับทรานซิชันอื่น ๆ โดยรับ duration, delay และ easing

กรณีการใช้งาน

การเผยโลโก้ ภาพเคลื่อนไหวของลายเซ็น ภาพวาดทางคณิตศาสตร์ และอินโทรของอินโฟกราฟิก

ใช้ร่วมกับการจาง

ใช้ in:draw และ out:fade เพื่อสร้างความสมมาตรระหว่างการเข้าและการออก

การคำนวณความยาว

ทรานซิชันนี้ใช้ getTotalLength() ภายใน พาธที่ซับซ้อนจะสร้างภาพเคลื่อนไหวได้อย่างเป็นธรรมชาติ

ภาพเคลื่อนไหวของหลายพาธ

จัดลำดับการวาดพาธหลายรายการโดยใช้ delay เพื่อควบคุมการเผยภาพให้ประสานกัน

{#each paths as p, i}
  <path d={p} stroke="black" transition:draw={{ delay: i * 100 }} />
{/each}

ประสิทธิภาพ

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

การรองรับของเบราว์เซอร์

ทำงานได้ทุกที่ที่รองรับ SVG และภาพเคลื่อนไหว CSS ซึ่งก็คือเบราว์เซอร์สมัยใหม่ทั้งหมด

ตรวจสอบความเข้าใจ

transition:draw ต้องมีอะไรบ้าง

สรุปทบทวน

ใช้ transition:draw กับพาธ SVG ที่มีเส้นขอบ เพื่อสร้างภาพเคลื่อนไหวการวาดกราฟิกเวกเตอร์ทีละส่วน

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

บทเรียน “transition:draw สำหรับเส้นทาง SVG” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “transition:draw สำหรับเส้นทาง SVG” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “transition:draw สำหรับเส้นทาง SVG”

ทำให้เส้น SVG เคลื่อนไหวทีละส่วนด้วยการเปลี่ยนภาพ draw คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “transition:draw สำหรับเส้นทาง SVG” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม

ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. transition:fade และ transition:fly
  2. พารามิเตอร์การเปลี่ยนภาพ: duration delay easing
  3. in: และ out: สำหรับการเปลี่ยนภาพแบบไม่สมมาตร
  4. transition:draw สำหรับเส้นทาง SVG
← กลับไปที่ Sveltejs Academy