8 thư viện JavaScript để tạo hiệu ứng SVG
SVG là một đồ họa độc lập với độ phân giải. Điều đó có nghĩa là nó sẽ nhìn tốt trên mọi loại màn hình mà không bị giảm chất lượng. 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.
Trong một trong những bài đăng của loạt SVG của chúng tôi trước đây, chúng tôi đã cho bạn thấy cách hoạt hình SVG hoạt động với
Thêm thông tin trên Hongkiat.com:
- Animate.css - Thư viện CSS3 để tạo hoạt hình dễ dàng
- Dễ dàng tạo hiệu ứng văn bản với Textillate.js
- Cách chuyển đổi văn bản Photoshop thành SVG
- Hoạt hình để ẩn và trượt nội dung với jQuery
1. Vivus
Vivus là một thư viện JavaScript mang đến cho SVG của bạn vẻ ngoài được vẽ. Vivus hoạt động tốt mà không cần bất kỳ sự phụ thuộc nào (ví dụ: jQuery). Đơn giản chỉ cần bao gồm .js tệp trong HTML của bạn và chỉ định phần tử SVG mà bạn muốn tạo hiệu ứng, cùng với một số tùy chọn đặt sẵn để bắt đầu hoạt hình ngay lập tức.
Ví dụ:
Vivus mới ('svg-phần tử', type: 'oneByOne', thời lượng: 200); Ở trên sẽ làm động phần tử SVG của tôi có yếu tố ID trong 200 mili giây. Từng yếu tố của SVG này sẽ được rút từng cái một trong khung thời gian đó.
2. Cây cảnh
Cây cảnh là một thư viện JavaScript mạnh mẽ cho phép bạn vẽ, biến hình cũng như các yếu tố đồ họa hoạt hình trên các trang web. Nó hỗ trợ cả Canvas và SVG loại đồ họa HTML5. Với bonsai, bạn có thể xây dựng một hình chữ nhật đơn giản hoặc một hình tròn hoặc nếu bạn thích, một nhiều người chơi trò chơi hoạt hình như thế này. Bạn có thể sử dụng Orbit để cảm nhận cách thức hoạt động của bonsai trong hoạt động trực tiếp hoặc xem một vài ví dụ ấn tượng này để lấy cảm hứng từ.
3. Vận tốc
Velocity là một thư viện JavaScript được xây dựng cho hình ảnh động nhanh. Tốc độ của tốc độ khi kết xuất hoạt hình là cực kỳ nhanh. Nó vượt trội so với jQuery và thậm chí cả CSS. API của Velocity hoạt động tương tự như hoạt hình trong jQuery ngoại trừ nó sử dụng bí danh từ khóa $ .velocity () thay vì $ .animate (). Ngoài ra, bạn có thể sử dụng các từ khóa hoạt hình chính xác như fadeIn và phai.
4. Raphael
RaphaelJS là một thư viện cho phép bạn vẽ cũng như tạo hình động SVG đồ họa trên các trang web. Nó hỗ trợ một loạt các trình duyệt cho đến IE6, điều này khiến cho Raphael trở thành thư viện JavaScript đáng tin cậy nhất trong thị trường ngách. 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 giống như của Counter Strike.
5. Chụp
SnapSVG là một thư viện JavaScript phổ biến khác cho hoạt hình SVG được phát triển bởi nhà phát triển Raphael, Dmitry Baranovskiy, cùng với Nhóm nền tảng web Adobe 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à mặt nạ.
6. Họa sĩ dòng kẻ lười biếng
Lazy Line Họa sĩ là một plugin jQuery để tạo hiệu ứng đường dẫn SVG để tạo hiệu ứng cho chuỗi bản vẽ, tương tự như Vivus. Tin xấu là plugin này chỉ thực hiện điều này rất cụ thể. Do đó, khi bạn nhập SVG từ các ứng dụng như Illustrator hoặc Inkscape, hãy đảm bảo rằng không còn màu Fill trên SVG của bạn, chỉ là các đường dẫn.
7. SVG.js
SVG.js là một thư viện gọn nhẹ để thao tác và tạo hiệu ứng cho SVG. Với thư viện này, bạn sẽ có thể làm động kích thước, vị trí hoặc màu sắc trong phần tử SVG của bạn. Nó không chỉ hoạt hình mặc dù; 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ư gaussian Blur, desaturate, độ tương phản, màu nâu đỏ, vv cho hình ảnh.
8. Lối đi
Walkway hỗ trợ ba loại yếu tố, con đường, hàng, và đa tuyến Được sử dụng để vẽ các đường SVG. Dưới đây là một ví dụ từ Polygon cho thấy hoạt hình dòng máy chơi game PlayStation 4.
