ไลบรารี JavaScript 5 อันดับแรกสำหรับภาพเคลื่อนไหว SVG

ไลบรารี JavaScript ที่แนะนำสำหรับภาพเคลื่อนไหว SVG

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

แต่คุณรู้หรือไม่ว่าเราสามารถใช้ SVG นอกเหนือจากการใช้ภาพนิ่งได้

ในบทความนี้ ฉันจะแนะนำไลบรารี JavaScript 5 ไลบรารีที่เราสามารถใช้เพื่อทำให้ SVG เคลื่อนไหวได้

1. BonsaiJS — API กราฟิกที่ใช้งานง่าย

ไลบรารีกราฟิกน้ำหนักเบาพร้อม API กราฟิกที่ใช้งานง่ายและตัวเรนเดอร์ SVG

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

นอกจากนั้น BonsaiJS ยังได้รับการดูแลอย่างดีด้วยเอกสารที่ยอดเยี่ยมและมีคุณสมบัติที่น่าทึ่ง

คุณสมบัติของบอนไซJS

รองรับทั้งกราฟิก HTML5 และ SVG
รันเนอร์และเรนเดอร์ถูกแยกออกจากกันทางสถาปัตยกรรม
ให้คีย์เฟรมและภาพเคลื่อนไหวแบบดั้งเดิม
iFrame, Worker และ Node กำลังรันบริบท
รองรับเบราว์เซอร์หลักทั้งหมด รวมถึง Chrome, Safari, Firefox และ Opera

การติดตั้งและการใช้งาน

คุณสามารถติดตั้ง BonsaiJS สำหรับโปรเจ็กต์ของคุณได้อย่างง่ายดายโดยใช้คำสั่ง npm install bonsai จากนั้นคุณสามารถใช้ BonsaiJS API เพื่อฝังและทำให้ภาพ SVG ของคุณเคลื่อนไหวได้ดังนี้:

bonsai.run(document.body, {
  width: 600,
  height: 600,
  code: function() {
    var url = 'example.svg';
    new Bitmap(url).on('load', function() {
      this.attr('width', 200);
      this.addTo(stage);
      this.animate('3s', {
        x: 200
      });
    });
  }
});

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

2. VivusJS — การพึ่งพาเป็นศูนย์

VivusJS เป็นไลบรารี JavaScript น้ำหนักเบาที่ให้คุณสร้างภาพเคลื่อนไหว SVG ได้

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

คุณสมบัติของ VivusJS

มีภาพเคลื่อนไหวหลัก 3 ประเภท ได้แก่ ดีเลย์ ซิงค์ และทีละรายการ
มีตัวเลือกการกำหนดเวลา 5 แบบสำหรับเส้นทางและภาพเคลื่อนไหว
ประสิทธิภาพสูง.
อนุญาตให้สร้าง SVG ของคุณเอง
สามารถทดสอบก่อนการติดตั้งด้วย Vivus Instant

การติดตั้งและการใช้งาน

VivusJS มีการดาวน์โหลด NPM มากกว่า 4,500 ครั้งต่อสัปดาห์ และมีดาว GitHub 13.5,000 ดวง

คุณสามารถติดตั้ง VivusJS โดยใช้ NPM, Bower หรือ CDN

// NPM
npm install vivus
// Bower
bower install vivus
// jsDelivr CDN
cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js

จากนั้น คุณสามารถใช้ VivusJS เพื่อทำให้ SVG แบบอินไลน์หรือไดนามิกของคุณเคลื่อนไหวได้ดังนี้:

// Inline
<svg id="my-svg">
  <path...>
</svg>

<script>
  new Vivus('example.svg', {duration: 200}, myCallback);
</script>
----------------------------------------------------------
// Dynamic
<div id="svg-div"></div>
<script>
  new Vivus('svg-div', { duration: 200, file: 'example.svg' }, callback);
</script>

3. SVG.js — รองรับปลั๊กอิน

SVG.js เป็นไลบรารี JavaScript แบบโอเพ่นซอร์สสำหรับจัดการและสร้างภาพเคลื่อนไหว SVG

ช่วยให้คุณสามารถสร้างภาพเคลื่อนไหว SVG ใน 3 ด้านที่แตกต่างกัน ได้แก่ ขนาด ตำแหน่ง และสี SVG.js นั้นเรียบง่ายและมีน้ำหนักเบาเมื่อเทียบกับไลบรารีแอนิเมชั่นอื่นๆ และมาพร้อมกับฟีเจอร์ที่น่าตื่นเต้น

คุณสมบัติของ SVG.js

ไวยากรณ์ง่ายต่อการอ่านและทำความเข้าใจ
16KB เมื่อ gzipped และ 62KB เมื่อย่อเล็กสุด
ขนาด ตำแหน่ง การแปลง สี และภาพเคลื่อนไหวอื่นๆ
มี "ปลั๊กอิน" มากมายสำหรับการปรับแต่งเพิ่มเติม
รองรับเส้นทางการตัดและมาสก์ทึบอย่างสมบูรณ์

การติดตั้งและการใช้งาน

สามารถติดตั้ง SVG.js ได้โดยใช้ NPM, Yarn หรือ CDN

// NPM
npm install @svgdotjs/svg.js
// Yarn
yarn add @svgdotjs/svg.js
// CDNs
https://cdnjs.com/libraries/svg.js
https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js
https://unpkg.com/@svgdotjs/svg.js

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

import { SVG } from '@svgdotjs/svg.js'
var draw = SVG().addTo('body').size(300, 300)
var rect = draw.rect(100, 100).animate({
  duration: 2000,
  delay: 1000,
  when: 'now',
  swing: true,
  times: 5,
  wait: 200
}).attr({ fill: '#f06' })

4. Snap.svg — รองรับฟีเจอร์ SVG ล่าสุด

Snap.svg เป็นไลบรารี JavaScript สมัยใหม่ที่ทำให้ SVG ของคุณมีชีวิตชีวา

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

คุณสมบัติของ Snap.svg

รองรับคุณสมบัติ SVG ล่าสุด — การมาสก์ การตัด รูปแบบ การไล่ระดับสีแบบเต็ม และกลุ่ม
ไม่จำเป็นต้องสร้างเนื้อหา SVG ด้วย Snap เพื่อทำงานกับ Snap
สามารถสร้างเนื้อหา SVG ใน Illustrator, Inkscape หรือ Sketch จากนั้นใช้ Snap เพื่อสร้างภาพเคลื่อนไหวหรือปรับแต่งเนื้อหาได้
รองรับเบราว์เซอร์สมัยใหม่
ฟรี 100% และโอเพ่นซอร์ส

การติดตั้งและการใช้งาน

SVG.js สามารถติดตั้งได้โดยใช้ NPM และ Bower ดังนี้:

// NPM
npm i snapsvg
// Bower
bower install snap.svg

5. Lazy Line Painter — แอนิเมชั่นเส้นทาง

ไลบรารี JavaScript ที่ทันสมัยสำหรับภาพเคลื่อนไหวเส้นทาง SVG

Lazy Line Painter แตกต่างจากไลบรารีด้านบนเล็กน้อย เนื่องจากเป็นไลบรารีพิเศษสำหรับภาพเคลื่อนไหวบนเส้นทาง นอกจากนี้ยังมีเครื่องมือออนไลน์ที่เรียกว่า Lazy Line Composer ซึ่งช่วยให้คุณสร้าง SVG แบบเคลื่อนไหวได้ภายในไม่กี่วินาที

การติดตั้งและการใช้งาน

นอกจาก Lazy Line Composer แล้ว Lazy Line Painter ยังสามารถติดตั้งโดยตรงในโครงการของคุณโดยใช้ NPM หรือ CDN

// NPM
npm i lazy-line-painter
// CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/lazy-line-painter-1.9.4.min.js"></script>

หลังการติดตั้ง คุณสามารถนำเข้า Lazy Line Painter และเริ่มสร้างภาพเคลื่อนไหว SVG ได้

import LazyLinePainter from 'lazy-line-painter'

let el = document.querySelector('#example-svg')
let myAnimation = new LazyLinePainter(el, { strokeWidth : 10 })
myAnimation.paint()

บทสรุป

ในบทความนี้ ฉันได้พูดถึงไลบรารีแอนิเมชั่น JavaScript SVG ที่แตกต่างกัน 5 ไลบรารี แต่ละอันมีคุณสมบัติที่เป็นเอกลักษณ์และสามารถใช้งานได้ตามความต้องการของคุณ

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

ขอบคุณสำหรับการอ่าน !!!

สร้างเว็บแอปพลิเคชันที่ประกอบได้

อย่าสร้างเว็บใหญ่โต ใช้ Bit เพื่อสร้างและเขียนส่วนประกอบซอฟต์แวร์ที่แยกส่วน — ในเฟรมเวิร์กที่คุณชื่นชอบ เช่น React หรือ Node สร้างส่วนหน้าและส่วนหลังที่ปรับขนาดได้ด้วยประสบการณ์การพัฒนาที่ทรงพลังและสนุกสนาน

นำทีมของคุณไปที่ Bit Cloud เพื่อโฮสต์และทำงานร่วมกันในส่วนประกอบต่างๆ ร่วมกัน และเร่งความเร็ว ขยายขนาด และสร้างมาตรฐานการพัฒนาเป็นทีมได้อย่างมาก เริ่มต้นด้วยส่วนหน้าที่เขียนได้ เช่น Design System หรือ Micro Frontends หรือสำรวจแบ็กเอนด์ที่เขียนได้ ลองดูสิ →