สร้างและเคลื่อนไหวรูปหลายเหลี่ยม SVG

Sep 11, 2025

วิธีการ

ในบทช่วยสอนนี้เราจะสร้างภาพที่หลากหลายจาก SVG Triangles และตั้งค่าการเปลี่ยนภาพเคลื่อนไหวจากภาพหนึ่งไปอีกภาพหนึ่งในการคลิก มันจะดูบางอย่างเช่น ใบหน้าของพลัง เว็บไซต์. ภาพเคลื่อนไหวเหล่านี้สามารถเพิ่มความสนใจในเว็บไซต์โดยเฉพาะอย่างยิ่ง หน้าลงจอด รวมถึงการปรับปรุง ประสบการณ์การใช้งาน . หากคุณมีไซต์ที่ซับซ้อนเพื่อรักษาคุณจะต้องมีซุปเปอร์ เว็บโฮสติ้ง บริการ. การสร้างบางสิ่งที่ซับซ้อนน้อยลง? สร้างเว็บไซต์ อาจทำงานได้

หากต้องการเริ่มต้นเราจะเริ่มต้นด้วยสองอาร์เรย์: หนึ่งที่มีค่าที่เราเคลื่อนไหวและหนึ่งกับค่าที่เราเคลื่อนไหวจาก ทุกครั้งที่คลิกลิงก์เราจะค้นหา SVG ที่ตรงกับ href ของลิงค์นั้นและรับ คะแนน คุณลักษณะของแต่ละรูปหลายเหลี่ยมใน SVG เฉพาะนั้น

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

เราจะใช้ tweenmax เพื่อเคลื่อนไหวค่าของ จาก อาร์เรย์ถึงค่าของ ถึง อาร์เรย์ เมื่ออนิเมชั่นเสร็จสมบูรณ์เราจะตั้งค่า ถึง อาร์เรย์ที่จะกลายเป็นใหม่ จาก อาร์เรย์

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

 & lt; href = "# nat" & gt; nat & lt; / a & gt;
& lt; a href = "# bwl" & gt; bwl & lt; / a & gt;
& lt; a href = "# kevin" & gt; kevin & lt; / a & gt;

& lt; svg class = "svg-holder" & gt;
  รูปหลายเหลี่ยมสำหรับ #nat ไปที่นี่
& lt; / svg & gt;

& lt; svg id = "nat" class = "ซ่อน" & gt;
 รูปหลายเหลี่ยมสำหรับ #nat ไปที่นี่
& lt; / svg & gt;

& lt; svg id = "bwl" class = "ซ่อน" & gt;
 รูปหลายเหลี่ยมสำหรับ #bwl ไปที่นี่
& lt; / svg & gt;
& lt; SVG ID = "Kevin" Class = "Hidden" & GT;
 รูปหลายเหลี่ยมสำหรับ #kevin ไปที่นี่
& lt; / svg & gt;

01. แปลงภาพเป็นรูปหลายเหลี่ยม

two images before and after Primitive — ภาพจะดูก่อนและหลังการวิ่งผ่านดึกดำบรรพ์

ขั้นตอนแรกคือการสร้างภาพจริง สำหรับสิ่งนี้ฉันใช้เครื่องมือที่เรียกว่า ดั้งเดิม (ตรวจสอบ GitHub Repo . รูปภาพที่ใช้ในการกวดวิชาเป็นภาพส่วนตัวของเพื่อนไม่กี่คน

เรียกใช้ภาพที่คุณเลือกผ่านยูทิลิตี้ดั้งเดิมโดยใช้บรรทัดคำสั่ง:

 primitive -i input.jpg -o เอาท์พุท .svg -n 250 -m 1

-n 250 ระบุรูปหลายเหลี่ยม 250 -m 1 ระบุรูปร่างสามเหลี่ยมและ -i input.jpg -O เอาท์พุท .svg เป็นอินพุตและเอาต์พุต เป็นสิ่งสำคัญที่ SVG ทั้งหมดมีจำนวนรูปหลายเหลี่ยมเท่ากันและรูปร่างเดียวกัน เอาท์พุท .svg จะเป็นชุดของรูปหลายเหลี่ยม

02. วาง SVG ของคุณลงใน HTML

หลังจากสร้าง SVGs วางไว้ในร่างกายของ HTML ทำซ้ำ SVG แรกและให้หนึ่งในคลาสที่ซ้ำกัน .svg-holder .

ที่ .svg-holder จะเป็นคนเดียวที่มองเห็นได้ทางเทคนิค มันจะเป็นผู้ถือสำหรับทุกรูปหลายเหลี่ยมที่เคลื่อนไหวเข้าและออกจากมัน ให้ SVG ทั้งหมดยกเว้นผู้ถือชั้นเรียน ซ่อนเร้น และ id ด้วยชื่อที่ไม่ซ้ำกัน ควรตรงกับ href ในลิงค์ SVG ที่ซ่อนอยู่จะซ่อนอยู่ด้วย แสดง: ไม่มี; . มันเป็นสิ่งสำคัญที่จะต้องทำให้แน่ใจว่า href ของแต่ละลิงก์ตรงกับ id ของ SVG ที่เกี่ยวข้อง

จากนั้นประกาศตัวแปร:

 ให้ topolygonarray = [];
ให้ frompolygonarray = [];

03. สกัดพิกัดรูปหลายเหลี่ยม

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

 const getcoordinates = (รูปหลายเหลี่ยม) = & gt; {
  ส่งคืน polygon.getattribute ("คะแนน") การแข่งขัน (/ (-? [0-9] [0-9 \.] *), (- [0-9] [0-9] [0-9 \.] *) \ ( -? [0-9] [0-9 \.] *), (-? [0-9] [0-9 \.] *) \ (-? [0-9] [0-9] [0-9] [0-9] [0-9] [0-9] [0-9] [0-9] *), (-? [0-9] [0-9 \.] *) /);
};

04. อัปเดตอาร์เรย์รูปหลายเหลี่ยม

image saved as an SVG with text — บันทึกเป็น SVG สามเหลี่ยมทั้งหมดกลายเป็นองค์ประกอบ

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

 const updustrypolygonarrays = (idtoanimateto) = & gt; {
  topolygonarray = createPolyGonpointObject (document.getElementByid (idtoanimateto) .queryselectorall ("รูปหลายเหลี่ยม"));

  AnimatePolygons ();

  จาก polygonarray = topolygonarray;
}

ฟังก์ชั่นนี้เรียกใช้ฟังก์ชั่นอื่นสองฟังก์ชั่น - createPolyGonpointsObject และ AnimatePolygons .

createPolyGonpointsObject แปลงองค์ประกอบรูปหลายเหลี่ยมทั้งหมดเป็นวัตถุที่เราสามารถเคลื่อนไหวค่าของและ AnimatePolygons เคลื่อนไหวรูปหลายเหลี่ยมภายใน .svg-holder .

 const createPolygonpointsObject = (รูปหลายเหลี่ยม) = & gt; {
  Const Polygonsarray = [];

  polygons.foreach ((รูปหลายเหลี่ยม, i) = & gt; {
    const พิกัด = getCoordinates (รูปหลายเหลี่ยม);

    polygonsarray.push ({
      เติม: polygon.getattribute ("เติม"),
      หนึ่ง: พิกัด ,
      สอง: พิกัด ,
      สาม: พิกัด ,
      สี่: พิกัด ,
      ห้า: พิกัด ,
      หก: พิกัด 
    });
  });

  ส่งคืน polygonsarray;
}

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

05. เคลื่อนไหวรูปหลายเหลี่ยม

Two images made up of SVG polygons — ในรุ่นสุดท้าย Polygons SVG จะเปลี่ยนผ่านภาพเคลื่อนไหว

ลองใช้ tweenmax เพื่อเคลื่อนไหวรูปหลายเหลี่ยม

 const animatepolygons = () = & gt; {
  Const Polygons = Document.QuerySelector ("ผู้ถือ SVG") Queryselectorall ("รูปหลายเหลี่ยม");
  จาก polygonarray = createPolyGonpointsObject (รูปหลายเหลี่ยม);

  frompolygonarray.foreach ((obj, i) = & gt; {
    tweenmax.to (obj, 1, {
      หนึ่ง: topolygonarray [i]. หนึ่ง,
      สอง: topolygonarray [i] ..two
      สาม: topolygonarray [i] .three
      สี่: topolygonarray [i] ..four
      ห้า: topolygonarray [i] .five
      หก: topolygonarray [i] .six
      ความง่าย: Power3.Easeout,
      onupdate: () = & gt;
      {
        รูปหลายเหลี่ยม [i] .SetAttribute ("คะแนน", `$ {obj.one}, $ {obj.two} $ {obj.three}, $ {obj.four} $ {obj.five}, $ {obj.six } `);
      }
    });
  });
}

ในทุกเฟรมของแอนิเมชั่นลูปนี้เคลื่อนไหวแอตทริบิวต์คะแนนของรูปหลายเหลี่ยมที่มองเห็นได้ในปัจจุบัน .svg-holder ไปยังค่าใหม่ที่ตั้งไว้ด้านบน ที่ onupdate วิธีการใน tweenmax.to เรียกว่าทุกครั้งที่มีการอัปเดตภาพเคลื่อนไหวดังนั้นที่นี่จะทำงานในทุกการเปลี่ยนแปลงในค่าของ obj.one , obj.two , obj.three และอื่น ๆ ด้วยวิธีนี้ค่าคะแนนอนิเมชั่นและรูปร่าง Morphs ที่มีพิกัดที่แตกต่างกัน

ต่อไปเราสามารถเคลื่อนไหวการเติม สำหรับแต่ละรูปหลายเหลี่ยมใน .svg-holder ตั้งค่ากรอกลงในการเติมใน topolygonarray ที่อยู่ในดัชนีเดียวกัน

 polygons.foreach ((polygon, i) = & gt; {
    const tocolor = topolygonarray [i]. fill;

    tweenlite.to (รูปหลายเหลี่ยม, 1, {
      เติม: tocolor,
      ความง่าย: Power3.Easeout
    });
});

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

เพื่อปรับปรุงทักษะการออกแบบเว็บไซต์ของคุณต่อไปให้หัวหน้าการประชุมของเราสร้างและสัมผัสกับตารางงานที่เต็มไปด้วยลำโพงชั้นนำของอุตสาหกรรมการประชุมเชิงปฏิบัติการและโอกาสในการสร้างเครือข่ายที่มีคุณค่า อย่าพลาด! รับตั๋วของคุณตอนนี้ .

อ่านเพิ่มเติม:

คำแนะนำที่สมบูรณ์ไปยัง SVG
Animate SVG พร้อม JavaScript
30 เครื่องมือออกแบบเว็บไซต์ที่ดีที่สุดเพื่อเพิ่มความเร็วเวิร์กโฟลว์ของคุณ

สร้างและเคลื่อนไหวรูปหลายเหลี่ยม SVG

01. แปลงภาพเป็นรูปหลายเหลี่ยม

02. วาง SVG ของคุณลงใน HTML

03. สกัดพิกัดรูปหลายเหลี่ยม

04. อัปเดตอาร์เรย์รูปหลายเหลี่ยม

05. เคลื่อนไหวรูปหลายเหลี่ยม

วิธีการ - บทความยอดนิยม

วิธีการทำและใช้ Mahlstick สำหรับการวาดภาพ

สร้างอิมเมจที่ได้รับแสงแบบหลายด้วย Adobe CC

วิธีการสร้างสินทรัพย์ดิจิทัล

วิธีการวาดด้วยภาพความสัมพันธ์สำหรับ iPad

สีเหมือนอิมเพรสชั่นนิสต์

วาดภาพเหมือนต้นแบบเก่า

สร้างแอปที่รวบรวมข้อมูลเซ็นเซอร์

การทดสอบการใช้งานการใช้งาน

หมวดหมู่