แอนิเมชันแปรรูป SVG: จับคู่พาธก่อนทำแอนิเมชัน

หากเส้นรอบรูปควรคงเดิมขณะที่ทั้งเครื่องหมายหมุน ให้ ตั้งจุดหมุนร่วม SVG แทน

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

กฎแอนิเมชันข้อมูลพาธของ W3C กำหนดให้จำนวนและชนิดคำสั่งเหมือนกันในลำดับเดียวเพื่อคำนวณระหว่างอย่างราบรื่น นี่เป็นข้อกำหนดโครงสร้าง ไม่ได้เลือกว่ามุมใดของโลโก้ควรกลายเป็นมุมใดในสถานะถัดไป

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

สร้างสองพาธที่มุมจับคู่กัน

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

<svg id="matched" viewBox="0 0 160 160"
  xmlns="http://www.w3.org/2000/svg"
  role="img" aria-label="Square morphing into a diamond">
  <path fill="#147d78" d="M30 30L130 30L130 130L30 130Z">
    <animate attributeName="d" dur="2s" begin="0s"
      fill="freeze" calcMode="linear"
      values="M30 30L130 30L130 130L30 130Z;M80 20L140 80L80 140L20 80Z" />
  </path>
</svg>

องค์ประกอบ animate ของ SVG เปลี่ยนแอตทริบิวต์ตามเวลา ในที่นี้เปลี่ยน d ในสองวินาที fill="freeze" ของแอนิเมชันคงสถานะสุดท้าย ส่วน fill สีเขียวของพาธเป็นการตั้งค่าสีแยก

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

การจับคู่มุมชัดเจน:

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

หยุดการคำนวณระหว่างจริง

ตรวจจุดเริ่ม กลาง และจบก่อนปรับจังหวะเร่งช้าหรือเพิ่มของตกแต่ง สำหรับ SVG ด้านบน ตัวช่วยนี้หยุดไทม์ไลน์และเลื่อนไปเวลาหน่วยวินาที:

const svg = document.querySelector('#matched');
 
function showMorphAt(seconds) {
  svg.pauseAnimations();
  svg.setCurrentTime(seconds);
}
 
showMorphAt(1); // Midpoint of the two-second animation

MDN อธิบาย pauseAnimations() และ setCurrentTime() สำหรับควบคุมไทม์ไลน์ SVG เชื่อมตัวช่วยกับปุ่มค่า 0, 1 และ 2 นี่เป็นสามตำแหน่งในการคำนวณระหว่างเดียว ไม่ใช่ภาพแทนกันสามภาพ

ที่หนึ่งวินาที การคำนวณเชิงเส้นวางแต่ละพิกัดครึ่งทางระหว่างค่าปลายทั้งสอง มุมแรกจึงอยู่ที่ 55, 25 จุดกลางทั้งหมดในตัวอย่างที่สร้างนี้คือ:

M55 25L135 55L105 135L25 105Z

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

จำนวนคำสั่งเท่ากันยังให้การแปรรูปไม่ดีได้

คงสี่เหลี่ยมเริ่มต้น แต่กลับลำดับมุมของสี่เหลี่ยมเป้าหมาย:

Start:  M30 30L130 30L130 130L30 130Z
Target: M30 30L30 130L130 130L130 30Z

ปลายทั้งสองดูเป็นสี่เหลี่ยมเดียวกัน ทั้งสองสตริงยังใช้ M L L L Z แต่มุมที่สองกับสี่เดินข้ามรูปเพื่อสลับที่ ที่จุดกลาง พิกัดตรงกัน:

M30 30L80 80L130 130L80 80Z

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

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

คำนึงถึงช่องเปิดและชิ้นแยก

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

เอกสารอ้างอิง fill-rule อธิบายว่า SVG เลือกพื้นที่ภายในพาธอย่างไร รักษาพฤติกรรมเติมที่ตั้งใจขณะเตรียมและทดสอบพาธประกอบ หากช่องเปิดผิดในสถานะนิ่งแล้ว ใช้ คู่มือแก้ช่องเปิดที่ถูกเติม ก่อนเพิ่มการเปลี่ยน

ลำดับตรวจที่ใช้ได้จริงคือ:

1. ยืนยันขอบรูป ช่องเปิด และรายละเอียดแยกของแต่ละปลายทาง
2. ระบุพาธย่อยหรือองค์ประกอบแยกที่จับคู่
3. จัดจุดเริ่ม ทิศ และลักษณะสำคัญให้ตรงกัน
4. ตรวจสถานะกลางว่าขอบไขว้หรือรายละเอียดหายหรือไม่
5. ปรับเวลาเมื่อยอมรับรูปทรงนั้นแล้ว

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

ตรวจกฎของกลไกแอนิเมชันที่ใช้

ตัวอย่าง SVG โดยตรงจงใจใช้คำสั่งตรงกัน ไลบรารีเตรียมเพิ่มเติมได้ ข้อกำหนดจึงอาจต่าง

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

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

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

เตรียมราสเตอร์ก่อนจับคู่สถานะ

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

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

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

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

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

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

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

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

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

1. W3C — พาธ SVG — นิยามโครงสร้างการคำนวณข้อมูลพาธระหว่างและการจับคู่พารามิเตอร์
2. MDN — animate — อธิบายแอนิเมชันแอตทริบิวต์ตามเวลา
3. MDN — pauseAnimations — รองรับการหยุดไทม์ไลน์ตรวจ
4. MDN — setCurrentTime — อธิบายการเลื่อนไทม์ไลน์ SVG หน่วยวินาที
5. MDN — fill-rule — อธิบายพฤติกรรมพื้นที่ภายในงานประกอบ
6. GSAP — MorphSVG — อธิบายการปรับเป็นมาตรฐานและตัวควบคุมจับคู่จุด
7. KUTE.js — SVG Morph — อธิบายการเตรียมเฉพาะคอมโพเนนต์และกระบวนการพาธย่อย

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