8 ไลบรารี JavaScript สำหรับ Animate SVG

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

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

เพิ่มเติมเกี่ยวกับ Hongkiat.com:

• Animate.css - CSS3 Library เพื่อสร้างภาพเคลื่อนไหวได้อย่างง่ายดาย
• ทำให้ข้อความเคลื่อนไหวได้อย่างง่ายดายด้วย Textillate.js
• วิธีแปลงข้อความ Photoshop เป็น SVG
• เคลื่อนไหวเพื่อซ่อนและเลื่อนเนื้อหาด้วย jQuery

1. Vivus

Vivus เป็นไลบรารี JavaScript ที่ ให้ SVG ของคุณปรากฏตัว. Vivus ทำงานนอกกรอบโดยไม่จำเป็นต้องพึ่งพาใด ๆ (เช่น jQuery) เพียงรวมถึง .js ไฟล์ใน HTML ของคุณและกำหนดองค์ประกอบ SVG ที่คุณต้องการทำให้เคลื่อนไหวพร้อมกับตัวเลือกที่ตั้งค่าไว้ล่วงหน้าเพื่อเริ่มการเคลื่อนไหวทันที.

ตัวอย่างเช่น:

 ใหม่ Vivus ('svg-element', ประเภท: 'oneByOne', ระยะเวลา: 200); 

ข้างต้นจะทำให้ภาพองค์ประกอบ SVG ของฉันที่มี SVG องค์ประกอบ ID ใน 200 มิลลิวินาที องค์ประกอบของ SVG นี้แต่ละรายการจะถูกดึงออกมาจากส่วนอื่นภายในกรอบเวลานั้น.

2. บอนไซ

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

3. ความเร็ว

Velocity เป็นไลบรารี JavaScript ที่สร้างขึ้นสำหรับภาพเคลื่อนไหวที่รวดเร็ว ความเร็วของ Velocity เมื่อแสดงภาพเคลื่อนไหวรวดเร็วอย่างเหลือเชื่อ มันมีประสิทธิภาพสูงกว่า jQuery และแม้กระทั่ง CSS ในการเปรียบเทียบ API ของ Velocity ทำงานคล้ายกับภาพเคลื่อนไหวใน jQuery ยกเว้นว่าจะใช้นามแฝงของคำหลัก $ .velocity () แทน $ .animate (). นอกจากนั้นคุณสามารถใช้คำหลักแอนิเมชันเดียวกันได้เช่น fadeIn และ fadeOut.

4. ราฟาเอล

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

5. ถ่ายภาพ

SnapSVG เป็นอีกหนึ่งไลบรารี JavaScript ยอดนิยมสำหรับแอนิเมชั่น SVG ที่พัฒนาโดย Dmitry Baranovskiy ผู้พัฒนา Raphael พร้อมด้วย Adobe Web Platform Team ตั้งแต่เริ่มต้น ต่างจาก Raphael แต่ SnapSVG นั้นมีความหมายเฉพาะเบราว์เซอร์รุ่นล่าสุดเท่านั้น ที่ช่วยให้ห้องสมุดมีขนาดเล็กกว่าราฟาเอลอย่างมีนัยสำคัญและสนับสนุนคุณสมบัติ SVG เช่นการตัดและการปิดบัง.

6. Lazy Line Painter

Lazy Line Painter เป็นปลั๊กอิน jQuery สำหรับการเคลื่อนไหวเส้นทาง SVG เพื่อทำให้ลำดับการวาดภาพเคลื่อนไหวคล้ายกับ Vivus ข่าวร้ายคือปลั๊กอินนี้ทำสิ่งนี้เฉพาะอย่างยิ่งเท่านั้น ดังนั้นเมื่อคุณนำเข้า SVG จากแอพอย่าง Illustrator หรือ Inkscape ต้องแน่ใจว่าไม่มีสีเติมที่เหลืออยู่ใน SVG ของคุณเพียงแค่พา ธ.

7. SVG.js

SVG.js เป็นไลบรารี่ที่มีน้ำหนักเบาสำหรับจัดการและสร้างภาพเคลื่อนไหว SVG ด้วยห้องสมุดนี้คุณจะสามารถเคลื่อนไหวขนาดตำแหน่งหรือสีภายในองค์ประกอบ SVG ของคุณ มันไม่เพียง แต่ทำให้เคลื่อนไหว คุณยังสามารถใช้ปลั๊กอินเพิ่มเติมเพื่อเพิ่มฟังก์ชันการทำงานพิเศษ ตัวอย่างนี้ใช้ปลั๊กอิน svg.filter.js เพื่อใช้ตัวกรองเช่น gaussian blur, desaturate, contrast, sepia เป็นต้นกับภาพ.

8. ทางเดิน

ทางเดินรองรับองค์ประกอบสามประเภท, เส้นทาง, เส้น, และ เส้น ใช้ในการวาดเส้น SVG นี่คือตัวอย่างจากรูปหลายเหลี่ยมที่แสดงภาพเคลื่อนไหวแนวคอนโซล PlayStation 4.