Animating SVG hơi độc đáo ở chỗ có ba cách khác nhau rõ ràng mà bạn có thể tiếp cận để tạo hoạt ảnh cho nó.
1. Tạo hoạt ảnh bằng CSS @keyframes
Các phần tử SVG có thể được nhắm mục tiêu và tạo kiểu bằng CSS. Có nghĩa là, bạn có thể áp dụng hoạt ảnh thông qua @keyframes. Như thế này:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Bạn có thể chọn tạo hoạt ảnh theo cách này nếu…
- Hình ảnh động khá đơn giản.
- Bạn chỉ cần làm động các thuộc tính mà CSS có thể tạo hoạt ảnh.
- Bạn đã biết và cảm thấy thoải mái với hoạt ảnh CSS.
2. Hoạt ảnh với SMIL
Có một cú pháp cho hoạt ảnh được tích hợp ngay trong SVG. Đây là một ví dụ rất đơn giản:
Đây là một hướng dẫn lớn về tất cả những gì là SMIL.
Bạn có thể chọn tạo hoạt ảnh theo cách này nếu…
- Bạn cần tạo hiệu ứng cho các thuộc tính mà CSS không thể, như chính hình dạng.
- Bạn cần các tính năng cụ thể khác của SMIL, như bắt đầu hoạt ảnh khi một hoạt ảnh khác kết thúc mà không cần thời lượng / độ trễ đồng bộ hóa theo cách thủ công. Hoặc nội dung tương tác, chẳng hạn như bắt đầu hoạt ảnh khi nhấp chuột.
3. Hoạt ảnh bằng JavaScript
Với JavaScript, bạn có quyền truy cập vào những thứ như requestAnimationFrame (hoặc các vòng lặp khác), vì vậy bạn có thể tạo hoạt ảnh chỉ bằng cách thay đổi nhanh chóng các giá trị thuộc tính. Ngoài ra còn có các khung công tác để làm việc với SVG thường được tích hợp sẵn nội dung hoạt hình. Hoặc các khung hoạt hình hoạt động với SVG. Như SnapSVG, GreenSock, SVG.js hoặc Velocity.js.
Đây là một ví dụ với SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Bạn có thể chọn tạo hoạt ảnh theo cách này nếu…
- Dù sao thì bạn cũng đang làm việc trong JavaScript, có lẽ hoạt ảnh của bạn phải liên quan đến dữ liệu bạn nhận được bằng JSON hoặc tương tự.
- Dù sao thì bạn cũng cần JavaScript, bởi vì bạn cần logic hoặc toán học hoặc thứ gì đó khác thực sự chỉ có thể ở đó.
- Bạn quan tâm đến việc JavaScript giải quyết một số lỗi cho bạn.
- Phạm vi hoạt ảnh của bạn khá lớn / phức tạp và bạn cần sự trừu tượng và tổ chức mà JavaScript có thể cung cấp.
Bản giới thiệu
Xem Pen Three Ways to Animate SVG của Chris Coyier (@chriscoyier) trên CodePen.
Cuối cùng thì cách bạn sử dụng SVG có ảnh hưởng đến các tùy chọn của bạn không?
Nó có. Nếu đang sử dụng SVG-as- , bạn sẽ không thể sử dụng hoạt ảnh CSS từ một biểu định kiểu khác. Tuy nhiên, hoạt ảnh SMIL của bạn sẽ hoạt động, trong một số trình duyệt (tại thời điểm viết bài này, Chrome có, Firefox không). Tôi sẽ không ngạc nhiên nếu CSS nhúng trong tệp SVG hoạt động hoặc sẽ hoạt động vào một ngày nào đó. JavaScript, có lẽ không.
Nếu bạn đang sử dụng SVG trong hình nền CSS, tôi tưởng tượng đó là một câu chuyện tương tự như trên.
Nếu bạn sử dụng nội tuyến , tất cả các khả năng đều mở ra cho bạn.
Nếu bạn đang sử dụng SVG thông qua objecthoặc iframe, bạn cần phải nhúng các tập lệnh / kiểu ngay trong SVG để nó hoạt động.