Đồ họa vector hiện đang chiếm lĩnh web và thậm chí các ứng dụng di động. Các biểu tượng, nút và thành phần của trang web hoặc ứng dụng dành cho thiết bị di động hiện đang ngày càng dựa trên vectơ, giảm bitmap vì cần phải hiển thị trên tất cả các loại độ phân giải màn hình, dpi, tỷ lệ, v.v. và vì khả năng "phóng to" hữu ích đọc tốt hơn các trang trên trình duyệt di động làm cho tài sản bitmap trở nên xấu xí và không thể sử dụng được nữa.

Vì vậy, đã đến lúc bắt đầu tạo các biểu tượng hoạt hình, hình nền và điều khiển trong SVG nhưng làm thế nào để bạn làm động các tệp SVG?

Rất nhiều câu trả lời này cũng được đăng trong câu hỏi liên quan này về cách làm động các hình minh họa cho web.

Tránh hoạt hình SMIL

Sara Soueidan, có lẽ là nhà làm phim hoạt hình hay nhất về SVG trên web, đã viết "Tôi biết tôi đã viết hướng dẫn cho hoạt hình SMIL nhưng, nhìn thấy tương lai của họ, tôi không còn sử dụng chúng nữa." Bạn cũng không nên.

Hoạt hình SMIL không hoạt động trong bất kỳ IE, Edge, một số trình duyệt di động nào và đang dần bị Chrome / Opera bỏ rơi (mặc dù, gần đây, nhóm Chrome cho biết sự phản đối này tạm thời bị đình chỉ ). Bạn nên tránh sử dụng chúng 99% thời gian.

Sử dụng CSS cho các hình ảnh động rất đơn giản

SVG phần lớn có thể được làm động bằng cách sử dụng CSS thuần túy (bao gồm sử dụng :hovercác trạng thái, transforms, transitions và animations). Nó đã lên kế hoạch để có được hỗ trợ hoạt hình CSS đầy đủ nhưng hiện tại chỉ có một số được hỗ trợ và có thể có lỗi với các sự cố trình duyệt chéo.

Sara Soueidan cho biết CSS rất tốt để tạo hiệu ứng cho các SVG nhưng thích JS hơn vì nó giúp giải quyết các vấn đề về trình duyệt chéo này. Như vậy, hãy sử dụng nó khi bạn có thể nhưng quay lại với JS khi các hình động phức tạp hơn hoặc không hoạt động trên nhiều trình duyệt.

Sử dụng hoạt hình JavaScript nếu CSS không hoạt động

Hầu hết thời gian, các SVG có thể được làm động bằng cách sử dụng một ít JavaScript mà không cần thư viện hoạt hình JavaScript. Hoạt hình trong JS có nhiều hỗ trợ trình duyệt chéo hơn và khá dễ sử dụng với một số hiểu biết cơ bản.

Đối với các hình ảnh động phức tạp yêu cầu sử dụng dòng thời gian hoặc một cái gì đó tương tự, sử dụng thư viện như GSAP có thể rất hữu ích. Có vô số thư viện hoạt hình SVG khác, Snap.svg là một thư viện lớn khác, nhưng hầu hết không xử lý hoạt ảnh gần như dễ dàng hoặc hiệu quả như GSAP.

Đối với các loại hoạt hình cụ thể , sử dụng một plugin JS cụ thể như MorphSVG của GSAP có thể giúp bạn tiết kiệm khá nhiều thời gian vì chúng xử lý các vấn đề về trình duyệt chéo và tất cả các tính toán. Tuy nhiên, hầu hết các hình ảnh động không yêu cầu các plugin như thế này. Xem "Hướng dẫn về các lựa chọn thay thế cho các tính năng SMIL" để biết thêm.

Cũng có thể chấp nhận sử dụng polyfill cho SMIL, nhưng tôi không thích làm điều đó vì chúng không được sử dụng / thử nghiệm rất rộng rãi. Với điều đó đã được nói, Eric Willigers và FakeSmile là hai phổ biến nhất.

Dụng cụ

Phần mềm duy nhất tôi gặp phải xuất khẩu sang SVG + JS là một plugin Adobe After Effects có tên Lottie (trước đây là Bodymovin), một phần mở rộng Flash có tên Flash 2 SVG và một công cụ trực tuyến nhỏ có tên là SVG Circus . Ngoài ra, các trình hoạt hình phần mềm như Adobe Edge Animate, Adobe Animate CC hoặc Animatron xuất sang hoạt hình SMIL không nên sử dụng. Vì vậy, tốt nhất là để một số nhà phát triển tạo hoạt hình SVG + CSS hoặc SVG + JS bằng cách sử dụng các SVG được xuất từ ​​trình chỉnh sửa . Inkscape có một tài nguyên tuyệt vời liên kết các hướng dẫn và ví dụ về cách thực hiện việc này.

Tôi chắc chắn trong tương lai nhiều phần mềm hoạt hình sẽ hỗ trợ xuất sang SVG + JS.

Một số lưu ý quan trọng khác

• Điều quan trọng là phải ghi nhớ hiệu suất . Sara Drasner đã tạo một số điểm chuẩn hiệu suất cho SVG , cho thấy bạn nên chọn cho hoạt ảnh CSS được tăng tốc phần cứng bất cứ khi nào có thể nhưng dự phòng theo cách tiếp cận JavaScript tốt khi không thể.

• Tốt nhất là sử dụng các SVG trong <object>thẻ hoặc được nhúng trực tiếp vào một <svg>phần tử XML nếu nó tương tác và làm hình nền nếu nó không tương tác, nhưng cũng có nhiều cách khác để làm điều đó .

Để có cái nhìn toàn cảnh hơn về hoạt hình trên web, hãy đọc bài đăng của Rachel Nabor trên Phần Danh sách . Đối với một số đề xuất bổ sung trong công cụ, bài đăng này rất hữu ích, mặc dù tôi không đồng ý với tất cả các tình cảm, đặc biệt là cách nó thể hiện hoạt hình SMIL.

Tôi luôn thấy việc dựa vào bất cứ thứ gì khác ngoài các thư viện JS là một sự hỗ trợ / bảo trì WRT rất lớn.

Tôi đã luôn luôn sử dụng D3.js . Ban đầu nó được tạo ra để tạo các phần tử SVG / DOM tương tác từ các tập dữ liệu. Tuy nhiên, bạn có thể sửa đổi SVG / DOM được bao gồm trong một trang, miễn là JS có quyền truy cập vào nó.

Tôi đã sử dụng trong nhiều dự án để tạo / tạo hiệu ứng SVG / DOM. một số ví dụ bao gồm bảng điều khiển thời gian thực mềm, trực quan hóa bản đồ, biến đổi DOM và để tạo tệp SVG để đưa vào tệp PDF. Tôi cũng đã thấy nó trên web. Trang web này có một loạt các ví dụ và liên kết đến các trang đã sử dụng nó.

Tôi khuyên bạn nên sử dụng vì nó tương thích nhiều trình duyệt, có cộng đồng tích cực và dễ học. Hãy xem trang web và chú ý đến việc sử dụng thế giới thực để xem một mẫu nhỏ về những gì bạn có thể làm với nó.

Sau đây là những cách có thể để làm sinh động Svg:

ĐỘNG VẬT SVG

SVG có thể được tạo hình động thông qua ngôn ngữ đánh dấu riêng mạnh mẽ của nó, được gọi là SMIL, được xuất trực tiếp từ các công cụ hoạt hình như plugin Adobe Animate CC + flash2svg.

Để tạo hiệu ứng SVG với SMIL ngay cả trên các trình duyệt thiếu hỗ trợ, bạn chỉ cần sử dụng một polyfill SMIL.

Một polyfill là một đoạn mã javascript đặc biệt cung cấp hỗ trợ cho các tính năng bị thiếu trong trình duyệt, dịch mã hóa gốc trong một trình duyệt mà trình duyệt có thể hiểu được.

Polyfill SMIL được tạo bởi Eric Willigers thực hiện điều đó: nó dịch SMIL thành API hoạt hình web mà ngay cả trình duyệt Microsoft cũng hỗ trợ. Nó hiệu quả đến mức các nhà phát triển Google Chrome đã quyết định bỏ hỗ trợ SMIL bản địa và tập trung vào Web Animations, để lại cho Eric Willigers hoàn thành nhiệm vụ phát các tệp SMIL trong Chrome.

Ai đó đã hiểu sai điều này là sự phản đối của SMIL bởi Chrome và chỉ trích các nhà phát triển cho sự lựa chọn này. Nhưng đó không phải là một sự phản đối thực sự, chỉ là một sự thay đổi công việc diễn giải SMIL ở mức độ polyfill.

Trên thực tế, chính các nhà phát triển Chrome đã trích dẫn polyfill Willigers trong thông báo chính thức về ý định từ chối SMIL.

Vì vậy, nếu bạn đọc trên web về sự sụp đổ của SMIL, đừng lo lắng. Cái chết của người Viking về SMIL đã rất lớn. Nó giống như một sự tái sinh.

Để sử dụng SMIL trên tất cả các trình duyệt, bao gồm IE và EDGE, bạn chỉ cần thêm polyfill javascript này vào trang web của mình:

https://github.com/ericwilligers/svg-animation

Đây là một trang demo sử dụng polyfill được tạo bởi Tom Byrne, tác giả của nhà xuất khẩu flash2svg nổi tiếng:

trang không có polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

và cùng một trang với polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htmlm

Nếu bạn nhìn vào nguồn nó là khá nhiều tự giải thích.

Ngoài ra, các màn trình diễn với polyfill thường tốt hơn SMIL gốc, bởi vì trên nhiều trình duyệt Web Animations được tăng tốc phần cứng, trong khi SMIL thường thì không.

ĐỘNG VẬT XUẤT KHẨU TRONG SVG SMIL

Cách đơn giản hơn để tạo hoạt hình SVG là sử dụng các công cụ như Adobe Animate CC để vẽ chúng và các plugin như Flash2svg ( https://github.com/TomByrne/Flash2Svg ) để xuất chúng trong SVG. Với nó, bạn có thể xuất hầu hết tất cả các hình động + âm thanh dưới dạng một tệp SVG, như tập phim hoạt hình này:
http://www.tbyrne.org/port portfolio / smil / LoveDota.svg

SVG ANIMATION JS LIBRARIES

Cách javascript phức tạp hơn. Trước hết bạn cần phải là một lập trình viên javascript. Sau đó, bạn phải chọn giữa nhiều thư viện. Phổ biến hơn là:

• SnapSVG http://snapsvg.io
  Thư viện này là sự kế thừa của thư viện hoạt hình Raphael cũ và phổ biến được thực hiện bởi cùng một tác giả. Rất ổn định, nhưng nó chuyển đổi SVG ở định dạng bên trong khi chạy để hoạt hình. Tùy chọn Morphing cũng rất cơ bản, chỉ là nội suy tuyến tính. (LƯU Ý: Ngoài ra còn có plugin snap.svg cho Adobe Animate CC, nhưng các tệp đã xuất bị cồng kềnh. Nhà xuất khẩu tạo một lệnh snapg cho mỗi khung hình của hoạt hình, không phải mỗi khung hình chính, tạo ra tệp svg 18Kb với hơn 1000 dòng của mã, chỉ để xoay một hình chữ nhật đơn giản qua 360 độ. Plugin Flash2svg hiệu quả hơn nhiều, chỉ cần một lệnh và vài byte để thực hiện cùng một công việc).

• Greensock MorphSVG
  http://greenock.com/morphSVG
  Một thư viện biến hình đầy đủ tính năng cho phép dễ dàng tạo hiệu ứng SVG và không cần phải chuyển đổi chúng ở định dạng bên trong. Chỉ cần tạo 3-4 khung hình chính Svg trong Inkscape và lib GreenG SVGMorphing sẽ tự động nội suy giữa các khung và tạo tất cả các khung ở giữa để phát lại mượt mà. Dưới đây là một ví dụ:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  Nếu bạn muốn hoạt hình trong 3D thư viện này rất mạnh mẽ.
  Seen.js kết xuất các tệp .obj 3D trong SVG và tạo hiệu ứng cho chúng rất dễ dàng.

HÌNH ẢNH SVG

Đối với các công cụ, bạn có thể tạo các khung hình chính hoạt hình chủ yếu bằng ba phần mềm:

• Inkscape: mã nguồn mở, có vô số tính năng, gói chỉnh sửa vectơ nâng cao được tạo bởi những người tham gia vào Nhóm làm việc SVG. Tham chiếu cho định dạng SVG. Không dễ học.

• Adobe Illustrator: thương mại, phần mềm vẽ vector rất mạnh mẽ, nó cung cấp nhiều tính năng vẫn chưa được hỗ trợ bởi SVG, nhưng nó cũng có khả năng tương thích tồi tệ nhất với định dạng. Bạn thường sẽ cần phải chỉnh sửa thủ công tệp SVG đã xuất để sửa lỗi trình minh họa. Nhưng nó rất phổ biến trong trường nghệ thuật, và tất cả các họa sĩ đều biết cách sử dụng nó.

• Afferve Designer: Đây là một phần mềm thương mại như Illustrator, nhưng có khả năng tương thích SVG tuyệt vời, gần như ở mức Inkscape. Giao diện người dùng thân thiện hơn nhiều và hiện đang trở nên rất phổ biến trong giới nghệ sĩ SVG.

GIÁM SÁT ĐỘNG VẬT SVG

Hiện tại trình chỉnh sửa hoạt hình SVG duy nhất là:

• Adobe Animate CC: Adobe Flash Pro trước đây đã được Adobe viết lại hoàn toàn để chuyển từ hoạt hình flash đã lỗi thời sang hoạt hình SVG hiện đại. Bạn có thể xuất các hoạt ảnh SVG kết quả cùng với thư viện javascript tùy chỉnh hoặc chọn lưu trong SVG + SMIL bằng cách sử dụng các plugin như "flash2svg". Tùy chọn cuối cùng này rất hiệu quả, tôi luôn sử dụng nó thay vì nhà xuất khẩu bản địa cồng kềnh.

Bạn có thể tải xuống plugin miễn phí từ đây: https://github.com/TomByrne/Flash2Svg

Hoặc cài đặt nó từ bảng điều khiển Adobe Plugins: https://creative.adobe.com/addons/products/7232

Thật không may, Adobe Animate CC là thương mại. Có các ứng dụng hoạt hình thay thế mã nguồn mở miễn phí, nhưng tôi đã thử tất cả và chúng vẫn hút IMHO. Hãy hy vọng cho tương lai.

Tài liệu tham khảo:
Bài đăng trên blog đầy đủ hơn của tôi về chủ đề này: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-prof Profession-animations-in-svg-9d4caca5f4ec

Trường hợp được tham chiếu về snap.svg: /programming/35727635/adobe-animate-snap-svg-plugin-huge-files