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.
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 đó.
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.
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.
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.
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.
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.
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.
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.
Walkway
Walkway hỗ trợ ba loại element: path, line, và polyline.
