8 thư viện JavaScript để tạo ảnh SVG động

SVG là một chuẩn đồ họa vector không phụ thuộc vào độ phân giải. Nó sẽ trông đẹp trên bất kỳ loại màn hình nào mà không bị giảm chất lượng (bị bể). Ngoài ra, bạn cũng có thể làm cho SVG trở nên sống động với một số hiệu ứng hoạt hình (animation).

Bài viết này sẽ chia sẻ một vài thư viện JavaScript giúp bạn có thể dễ dàng tạo các SVG animation.

Contents

Vivus
Bonsai
Velocity
RaphaelJS
SnapSVG
Lazy Line Painter
SVG.js
Walkway

Vivus

Vivus là một thư viện JavaScript cung cấp cho SVG của bạn vẻ ngoài như được vẽ . Vivus hoạt động hiệu quả mà không cần bất kỳ thư viện phụ nào (ví dụ: jQuery). Chỉ cần đưa tập tin .js vào HTML của bạn và chỉ định phần tử SVG mà bạn muốn tạo animation, cùng với một số tùy chọn đặt trước để bắt đầu hoạt ảnh ngay lập tức.

Ví dụ:

new Vivus( 'svg-element', { type: 'oneByOne', duration: 200 });

Phần trên sẽ tạo hiệu ứng cho phần tử SVG có svg-elementID trong 200 mili giây. Mỗi phần tử của SVG này sẽ được vẽ lần lượt trong khung thời gian đó.

Vivus

Bonsai

Bonsai là một thư viện JavaScript mạnh mẽ cho phép bạn vẽ, biến hình cũng như tạo hình ảnh động cho các yếu tố đồ họa trên các trang web.

Bonsai

Nó hỗ trợ cả loại đồ họa HTML5 Canvas và SVG. Với Bonsai, bạn có thể tạo một hình chữ nhật hoặc hình tròn đơn giản hoặc nếu bạn thích, một trò chơi hoạt hình nhiều người chơi.

Bạn có thể sử dụng Orbit để cảm nhận cách Bonsai hoạt động trong live action hoặc xem một vài ví dụ ấn tượng sau đây để lấy cảm hứng từ đó.

Velocity

Velocity là một thư viện JavaScript được xây dựng để tạo animation nhanh. Tốc độ của Velocity khi hiển thị hoạt ảnh cực kỳ nhanh. Nó vượt trội hơn jQuery và thậm chí cả CSS.

Velocity

API của Velocity hoạt động tương tự như animation trong jQuery ngoại trừ nó sử dụng keyword alias $.velocity() thay vì $.animate(). Ngoài ra, bạn có thể sử dụng các từ khóa hoạt ảnh giống hệt nhau, chẳng hạn như fadeIn và fadeOut.

RaphaelJS

RaphaelJS là một thư viện cho phép bạn vẽ cũng như tạo animation SVG vector trên các trang web. Nó hỗ trợ một loạt các trình duyệt, điều này khiến Raphael trở thành thư viện JavaScript đáng tin cậy nhất.

RaphaelJS

Với RaphaelJS, bạn có thể xây dựng các biểu đồ phân tích tương tác, bản đồ thế giới và các tương tác trong trò chơi tương tự như trong Counter Strike.

SnapSVG

SnapSVG là một thư viện JavaScript phổ biến khác cho SVG animation được phát triển bởi nhà phát triển Raphael, Dmitry Baranovskiy, cùng với Adobe Web Platform Team ngay từ đầu.

SnapSVG

Không giống như Raphael, SnapSVG chỉ dành cho các trình duyệt mới nhất. Điều đó cho phép thư viện nhỏ hơn đáng kể so với Raphael và hỗ trợ các tính năng SVG như cắt và tạo mặt nạ.

Lazy Line Painter

Lazy Line Painter là một plugin jQuery để tạo SVG animation để tạo hiệu ứng cho chuỗi bản vẽ, tương tự như Vivus.

Lazy Line Painter

SVG.js

SVG.js là một thư viện nhẹ để thao tác và tạo ảnh động cho SVG. Với thư viện này, bạn sẽ có thể tạo hoạt ảnh cho kích thước, vị trí hoặc màu sắc trong phần tử SVG của mình.

SVG.js

Bạn cũng có thể áp dụng các plugin bổ sung để thêm các chức năng bổ sung. Ví dụ này sử dụng plugin svg.filter.js để áp dụng các bộ lọc như làm mờ gaussian, khử bão hòa, tương phản, nâu đỏ, v.v. cho hình ảnh.