คู่มือวิธีการ SVG Animation

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

Scalable Vector Graphics (SVG) ช่วยในการแก้ปัญหาดังกล่าว และทำได้ดีมาก แม้ว่าจะมีข้อจำกัด แต่ SVG ก็มีประโยชน์มากสำหรับบางโอกาส และหากคุณมีทีมออกแบบที่ดี คุณสามารถสร้างประสบการณ์ที่น่าดูยิ่งขึ้นโดยไม่ต้องสร้างภาระให้กับเว็บเบราว์เซอร์หรือขัดขวางเวลาในการโหลด

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

กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้

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

ข้อกำหนด SVG เป็นมาตรฐานเปิดที่พัฒนาโดย World Wide Web Consortium (W3C) ในปี 2542

เว็บเบราว์เซอร์หลักทั้งหมดได้รับการสนับสนุนการเรนเดอร์ SVG มาระยะหนึ่งแล้ว

เนื่องจากกราฟิก SVG เป็นเอกสาร XML เว็บเบราว์เซอร์จึงมี API ที่ใช้โหนด DOM ซึ่งสามารถใช้เพื่อโต้ตอบกับรูปภาพได้ พูดคุยเกี่ยวกับการทำให้ภาพมีชีวิต!

เส้นทาง SVG

หากมีองค์ประกอบที่มีอำนาจเหนือกว่าใน SVG นั่นก็จะเป็นองค์ประกอบ <path>

องค์ประกอบเส้นทางเป็นรูปร่างพื้นฐานที่อาจใช้เพื่อสร้างรูปร่าง 2D ขั้นสูงเกือบทุกชนิดที่คุณสามารถจินตนาการได้

อิลิเมนต์ทำงานโดยใช้ลำดับของคำสั่งการวาด มันเหมือนกับภาษาการเขียนโปรแกรมโลโก้ในปี 1967 ที่ปรับปรุงให้ทันสมัยและออกแบบมาสำหรับกราฟิกแฟนซีเท่านั้น องค์ประกอบใช้ลำดับของคำสั่งการวาดผ่านแอตทริบิวต์ d

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

คุณสามารถนึกถึงปากกาเสมือนที่วาดบนหน้าจอ และความคิดเห็นเกี่ยวกับการวาดภาพในองค์ประกอบเส้นทางจะควบคุมปากกาเท่านั้น ในตัวอย่างข้างต้น ปากกากำลังถูกสั่งให้ย้ายไปที่ตำแหน่ง (10, 10) ( M10 10 ) ให้ลากเส้นไปที่ (75, 10) ( L75 10 ) เพื่อลากเส้นไปที่ (75, 75) L75 75 แล้วปิดเส้นทางโดยกลับไปที่จุดเริ่มต้น ( Z )

การใช้คำสั่งการวาดอื่นๆ เช่น เส้นโค้ง ( A ) เส้นโค้งเบซิเยร์กำลังสอง ( Q ) เส้นโค้งลูกบาศก์เบซิเยร์ ( C ) ฯลฯ คุณสามารถสร้างรูปร่างและกราฟิกที่ซับซ้อนมากขึ้นใน SVG

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับองค์ประกอบเส้นทางได้ที่นี่

เส้นทาง SVG และ CSS

“โอเค ฮวน ฉันเข้าใจ เส้นทางนั้นทรงพลัง แต่ฉันจะทำให้พวกมันเคลื่อนไหวได้อย่างไร” คุณพูด.

สำหรับเทคนิคแรกของเรา เราจะใช้ประโยชน์จากแอตทริบิวต์ SVG สองรายการ: stroke-dasharray และ stroke-dashoffset

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

เนื่องจากรูปภาพ SVG เป็นส่วนหนึ่งของ DOM ของเว็บเบราว์เซอร์ และ stroke-dasharray เป็นองค์ประกอบการนำเสนอ คุณจึงสามารถตั้งค่าแอตทริบิวต์ได้โดยใช้ CSS

ในทำนองเดียวกัน แอตทริบิวต์ stroke-dashoffset (ซึ่งระบุว่ารูปแบบ dash จะเริ่มต้น dash ได้ไกลแค่ไหน) ก็สามารถควบคุมได้โดยใช้ CSS

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

ใช้เส้นโค้งเบซิเยร์กำลังสองนี้ ตัวอย่างเช่น

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

เพื่อให้เส้นทางนี้เคลื่อนไหวราวกับว่ามันถูกวาดอย่างค่อยเป็นค่อยไปและราบรื่นบนหน้าจอ เราจะต้องตั้งค่าความยาวของเส้นประ (และช่องว่าง) โดยใช้แอตทริบิวต์ stroke-dasharray เท่ากับความยาวของเส้นทาง ทั้งนี้เพื่อให้ความยาวของแต่ละเส้นประและช่องว่างในเส้นโค้งเส้นประเท่ากับความยาวของเส้นทางทั้งหมด

ต่อไป เราจะตั้งค่าการชดเชยเส้นประโดยใช้แอตทริบิวต์ stroke-dashoffset เป็น 0 ซึ่งจะทำให้เส้นทางปรากฏบนหน้าจอเป็นเส้นโค้งทึบ (โดยพื้นฐานแล้วเรากำลังดูที่เส้นประแรก และเราได้ทำให้เส้นประแต่ละเส้นครอบคลุมทั้งหมดแล้ว ความยาวของเส้นโค้ง) โดยการตั้งค่าออฟเซ็ตเส้นประให้เท่ากับความยาวของเส้นโค้ง เราจะลงเอยด้วยเส้นโค้งที่มองไม่เห็น (ตอนนี้เรากำลังดูเส้นโค้งที่แสดงผลเป็นช่องว่างทั้งหมด—ส่วนที่ตามหลังเส้นประทันที)

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

ดู Pen Toptal - เส้นทาง SVG & CSS โดย Toptal Blog (@toptalblog) บน CodePen

อย่างที่คุณเห็น เส้นโค้งอยู่ที่นั่นเสมอ เรากำลังเปลี่ยนการชดเชยเส้นประเพื่อให้ส่วนที่เป็นเส้นประปรากฏทีละน้อยเท่านั้น

คุณสามารถก้าวไปอีกขั้นได้โดยใช้หลักการเดียวกัน แต่มีเส้นทางมากขึ้น:

ดู Pen Toptal - เส้นทาง SVG & CSS โดย Toptal Blog (@toptalblog) บน CodePen

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

Stroke-dasharray และ stroke-dashoffset เป็นแอตทริบิวต์ที่ทรงพลังมากสองอย่าง ที่สามารถใช้เพื่อปรับใช้แอนิเมชั่นและเอฟเฟกต์มากมายกับเส้นทาง SVG ของคุณ คุณสามารถลองใช้เครื่องมือที่มีประโยชน์นี้ซึ่งคุณสามารถใช้ทดสอบกับแอตทริบิวต์ทั้งสองได้

วัตถุเคลื่อนไหวตามเส้นทาง SVG

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

มีแอตทริบิวต์ SVG 2 รายการที่เราจะใช้สำหรับแอนิเมชัน:

• offset-path: คุณสมบัติ CSS offset-path ระบุเส้นทางออฟเซ็ตที่องค์ประกอบได้รับตำแหน่ง

• offset-distance: คุณสมบัติ CSS offset-distance ระบุตำแหน่งตามเส้นทางออฟเซ็ต

เมื่อรวมคุณสมบัติทั้งสองนี้เข้าด้วยกัน คุณสามารถสร้างแอนิเมชั่นในลักษณะนี้ได้อย่างง่ายดาย:

ดู Pen Toptal - เส้นทาง SVG & CSS โดย Toptal Blog (@toptalblog) บน CodePen

อย่างที่คุณเห็น เรามีองค์ประกอบใหม่ div.ball

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

แอนิเมชั่น SVG โดยใช้ JavaScript

หากสิ่งเหล่านี้ยังไม่หรูหราพอ คุณสามารถใช้ JavaScript ได้ตลอดเวลา

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

ก่อนหน้านี้ เราต้องฮาร์ดโค้ดความยาวพาธใน CSS ของเรา ด้วยความช่วยเหลือของฟังก์ชัน JavaScript path.getTotalLength() คุณจะสามารถคำนวณความยาวของเส้นทางได้ทันทีและใช้งานได้ตามต้องการ คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่นี่

นอกจากนี้ มีห้องสมุดจำนวนหนึ่งพร้อมให้คุณใช้งานแล้ว ซึ่งทำให้แอนิเมชั่น SVG ง่ายขึ้นกว่าเดิมมาก

Snap.svg ไม่เพียงแต่ทำให้การวาดภาพ SVG เป็นเรื่องง่ายโดยใช้ JavaScript เท่านั้น แต่ยังทำให้เคลื่อนไหวได้ง่ายเหมือนกับการเรียก .animate({})

ไลบรารีอื่น anime.js ให้คุณสร้างองค์ประกอบ div ตามเส้นทาง SVG ด้วยโค้ดเพียงไม่กี่บรรทัด

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

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

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

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

สิ่งหนึ่งที่บทความนี้ไม่ได้กล่าวถึงคือการสร้างภาพเคลื่อนไหวให้กับภาพ SVG ด้วย Synchronized Multimedia Integration Language (SMIL) แม้ว่าการใช้ CSV สำหรับ SVG จะทำให้คุณได้เปรียบในการทำงานกับสิ่งที่คุณคุ้นเคยอยู่แล้ว SMIL จะนำสิ่งต่างๆ ไปสู่อีกระดับหนึ่ง

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

แม้ว่าในขณะนี้การสนับสนุน SMIL จะค่อนข้าง หงุดหงิด (ไม่มีการเล่นสำนวน)

แอนิเมชั่นที่ไม่มีการประนีประนอมสำหรับเว็บ

ในบทความนี้ คุณได้ดำเนินการหลายวิธีแล้วในการทำให้องค์ประกอบ SVG เคลื่อนไหวโดยใช้องค์ประกอบ CSS หรือ HTML บนเส้นทาง SVG

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

และนั่นแหล่ะ! หวังว่าคุณจะพบว่าบทช่วยสอนแอนิเมชั่น SVG นี้มีประโยชน์และสนุกกับการอ่าน

อ่านเพิ่มเติมในบล็อก Toptal Engineering:

• วิธีเข้าถึงแอนิเมชั่น SVG ใน CSS