JavaScript là cách cuối cùng chúng ta sẽ đề cập đến việc tạo hoạt ảnh cho SVG. Chúng tôi đã xem xét CSS, CSS này rất tuyệt và khá thoải mái, nhưng nó không thể thực hiện một số thuộc tính SVG mà bạn có thể muốn tạo hoạt ảnh. Sau đó, chúng tôi xem xét SMIL, là một cú pháp khai báo ngay trong chính mã SVG, mạnh hơn ở chỗ nó có thể làm sinh động nhiều thứ hơn bao gồm cả hình dạng của chính phần tử.
JavaScript có thể làm mọi thứ mà một trong hai thứ có thể làm và làm tốt. Nó chỉ phải trả giá bằng cách tự viết mã thực sự phức tạp hoặc chi phí của một thư viện để giúp bạn. Nhưng một khi bạn đã thiết lập và chạy, cú pháp có thể thực sự tuyệt vời và thân thiện với các hình ảnh động và hiệu suất thực sự có thể là đỉnh cao.
Một lợi thế khác khi sử dụng JavaScript cho hoạt ảnh SVG là hỗ trợ. Có rất nhiều điều kỳ quặc cần quan tâm khi tạo hoạt ảnh cho SVG. Một số trình duyệt không hỗ trợ chuyển đổi trên các phần tử. Một số trình duyệt làm những điều kỳ lạ với tính năng phóng to trang. Một số không phù hợp với nguồn gốc biến đổi. Thư viện JavaScript thường giúp giải quyết những vấn đề này.
Trong khi chúng ta đang nói cụ thể về hoạt ảnh, nhiều thư viện JavaScript SVG nói chung là làm việc với SVG. Họ có thể tạo và thao tác với nó, truy cập các thuộc tính từ phần tử, thay đổi chúng, v.v. Kinda như thêm một API mạnh mẽ hơn vào SVG.
Snag.svg - “jQuery cho SVG”
Ví dụ cơ bản về cách sử dụng Snap.svg:
Xem Pen BhHix của Chris Coyier (@chriscoyier) trên CodePen.
Một điều khác mà chúng tôi đã làm trong video này với Snap.svg là chuyển đổi CSS hoạt hình Pen này sang Snap.svg, dạy chúng tôi rằng chúng tôi có thể sử dụng Snap.svg để làm việc với SVG nội tuyến đã có trên trang. Adobe đã tự mình thu thập một số ví dụ.
Raphael - thư viện cũ hơn từ cùng một người tạo như Snap.svg
SVG.js - “Một thư viện nhẹ để thao tác và tạo hoạt ảnh cho SVG.” Đây là bản demo đồng hồ mà chúng tôi đã xem, cho thấy cách hoạt động của các hoạt ảnh này bằng cách thao tác nhanh với DOM.
D3.js - “D3.js là một thư viện JavaScript để xử lý tài liệu dựa trên dữ liệu. D3 giúp bạn làm cho dữ liệu trở nên sống động bằng HTML, SVG và CSS. ” Đây là một hướng dẫn về cách bắt đầu tạo SVG với nó và một phần giới thiệu hoạt ảnh khác với nó.
GreenSock - “Hiệu suất cực cao, hoạt ảnh chuyên nghiệp cho web hiện đại.” GreenSock nói chung là về hoạt ảnh trên web, nhưng không hỗ trợ SVG. Đây là một chiếc Pen mà bạn có thể xem nó hoạt động như thế nào.
Velocity.js - “Hoạt ảnh JavaScript được tăng tốc.” Cũng là một thư viện về hoạt ảnh trên web nói chung, hỗ trợ SVG. Julian Shapiro đã tạo ra nó và đã viết về lý do tại sao hoạt ảnh JavaScript thực sự có thể là kiểu hoạt ảnh hiệu quả nhất cũng như cách hoạt động của Velocity.js. Đây là một bản demo rất đơn giản tạo hoạt ảnh cho một số thuộc tính dành riêng cho SVG.
Bạn cũng có thể tự do sử dụng nó với các hoạt ảnh JavaScript mà không cần sự trợ giúp của khung. Hãy nhớ SVG nội tuyến nằm trong DOM, vì vậy tất cả nội dung API DOM thông thường đều có sẵn cho bạn. Kinda như bạn thực sự không cần jQuery để làm việc với DOM, nó thường làm cho nó dễ dàng hơn. Đây là một ví dụ thực hiện mọi thứ theo cách riêng của họ khá thú vị.