23: Tạo hoạt ảnh SVG với SMIL - Thủ thuật CSS

Anonim

Mặc dù việc tạo hoạt ảnh SVG bằng CSS có thể thoải mái hơn đối với người dùng giao diện người dùng trung bình, SVG có một cách khác để tạo hoạt ảnh ngay trong chính cú pháp SVG. Đây chính xác là những gì chúng tôi đề cập ngắn gọn trong video này, nhưng nếu bạn muốn có một hướng dẫn tham khảo đầy đủ, hãy xem Hướng dẫn về Hoạt ảnh SVG (SMIL) của Sara Soueidan ngay tại đây trên CSS-Tricks.

SMIL là viết tắt của Synchronized Multimedia Integration Language. Theo tôi hiểu, đó là một “thứ” tất cả đều được tích hợp vào SVG. Nhưng SVG có một số bổ sung giống như SMIL của riêng mình. Tôi sẽ chỉ gọi nó là SMIL mặc dù tôi chắc rằng đôi khi tôi không chính xác về mặt kỹ thuật.

Đối với những hình ảnh động rất đơn giản, không thành vấn đề nếu bạn thực hiện nó trong SMIL hay CSS, nó sẽ làm điều tương tự ở cùng một mức độ khó. Một số thứ thậm chí có thể dễ dàng hơn trong CSS. Nhưng đây là một số điều mà SMIL là con đường để đi:

  • Bạn cần tạo hoạt ảnh cho thứ gì đó mà CSS không thể chạm vào. Giống như hình dạng của một đa giác hoặc đường dẫn.
  • Bạn muốn sử dụng các sự kiện để ảnh hưởng đến hình ảnh động, giống như một clickhoặc mouseoverhoặc một cái gì đó.
  • Bạn muốn thực hiện các hoạt ảnh bổ sung, chẳng hạn như hoạt ảnh từ bất cứ nơi nào bạn đang ở một x pixel khác.
  • Bạn muốn có các hoạt ảnh liên quan trực tiếp đến các hoạt ảnh khác, chẳng hạn như khi hoạt ảnh này kết thúc sẽ bắt đầu hoạt ảnh tiếp theo này (mà không cần thao tác thủ công thời lượng).
  • Tôi chắc chắn rằng có nhiều hơn nữa.

Cú pháp lúc đầu có vẻ đáng sợ, nhưng tôi hứa nó thực sự khá dễ dàng. Đây là một ví dụ cơ bản:

Xem Pen jAipI của Chris Coyier (@chriscoyier) trên CodePen.

Điều "biến đổi hình dạng" thực sự siêu độc đáo với SMIL, vì vậy đây là một ví dụ hay hơn một ví dụ kỳ lạ mà chúng tôi đã làm trong video:

Xem Nút Biến đổi Hình dạng Bút của Chris Coyier (@chriscoyier) trên CodePen.

Trong bản demo đó, các sự kiện được xử lý bởi JavaScript thay vì SMIL. Rất vui khi biết bạn cũng có thể làm được điều đó. Trình kích hoạt sự kiện SMIL rất tuyệt nhưng sau đó thứ cần được nhấp phải ở trong SVG đó chứ không phải ở bất kỳ nơi nào khác trong DOM.