Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

Cách Tạo Một Biểu Tượng Loader Bằng SVG Animation

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong bài hướng dẫn này, bạn sẽ được tìm hiểu về cách tạo một biểu tượng loader rất đơn giản bằng SVG Animation. Những gì chúng tôi sẽ đề cập đến khác với CSS Animation—SVG Animation nằm bên trong markup của SVG. Hãy bắt đầu bằng cách xem cú pháp.

Xem video hướng dẫn!

Ôn lại về Code SVG Bằng Tay

Trước khi chúng ta tiếp tục, nếu bạn cần ôn lại những điều cơ bản về viết code SVG bằng tay, Kezz đã khái quát nó cho bạn:

Cú Pháp

Hầu hết các trình duyệt hiện đại đều hỗ trợ SVG Animation bằng cách sử dụng một thứ gọi là "SMIL", viết tắt của "Synchronized Multimedia Integration Language". Ngôn ngữ này cho phép bạn hoạt hình một số thuộc tính cơ bản và có thể biến đổi của SVG. Ví dụ, bạn có thể hoạt hình position X và Y, một phép biến đổi xoay hoặc màu fill của một phần tử. Hãy xem hai ví dụ sẽ giúp bạn hiểu những điều cơ bản.

Ví Dụ 1

Đối với ví dụ đầu tiên, chúng ta bắt đầu với một phần tử <svg>, có các thuộc tính width, height và viewBox.

Sau đó, chúng ta đặt một hình chữ nhật, cùng với một số giá trị xác định vị trí, kích thước và màu fill bên trong nó.

Để hoạt hình hình chữ nhật này, chúng ta sẽ sử dụng một phần tử tự đóng <animate />, bên trong <rect>.

Bên trong <animate /> đó chúng ta thêm một số thuộc tính, đầu tiên sử dụng attributeName để xác định thuộc tính nào của <rect> mà chúng ta muốn hoạt hình (trong trường hợp này là position x).

Sau đó chúng ta xác định một giá trị fromto. Chúng ta sử dụng dur để xác định thời lượng, và repeatCount để xác định kiểu lặp mà chúng ta muốn.

Xong rồi! Bạn sẽ thấy trong bản demo mà giờ đây chúng ta có phần tử hoạt hình bên trong một SVG.

Chúng ta còn có thể hoạt hình nhiều thuộc tính trong hình chữ nhật của chúng ta; tất cả những gì chúng ta cần là thêm một <animate /> khác xác định một thuộc tính khác. Hãy hoạt hình thuộc tính width luôn nhé:

Cái thứ ba thế nào? Hãy thay đổi màu fill của nó luôn.

Ví Dụ 2

Ví dụ thứ hai sẽ hoạt hình một thuộc tính transform. Chúng ta sẽ bắt đầu với <svg> tương tự, nhưng với một <rect> hơi khác.

Lần này, thay vì thêm một phần tử <animate />, chúng ta sẽ thêm một phần tử <animateTransform />. Các thuộc tính của nó nhắm đến một attributeName, sau đó yêu cầu type của transform. Chúng ta có thể sử dụng begin để xác định khi nào hoạt hình sẽ bắt đầu, dur cho thời lượng, sau đó xác định tọa độ của nó theo dạng ba giá trị: góc, x, và y. Trong trường hợp của chúng ta, chúng ta sử dụng các tọa độ này để chỉ định một transform rotate.

Tương tự như ví dụ trước, chúng ta có thể thêm các phần tử <animateTransform /> để hoạt hình nhiều hơn một thuộc tính. Tuy nhiên, trong trường hợp của transform, chúng ta chỉ có thể chạy chúng tuần tự - không thể hoạt hình nhiều thuộc tính cùng một lúc.

Hãy tự mình thử bằng cách thêm một animation thứ hai với mục tiêu là scale:

Hai ví dụ này đã cho bạn thấy những cơ bản về cách làm việc với SVG Animation. Hãy sử dụng những gì chúng ta đã học để tạo ra một loader.

Tạo Một Biểu tượng Loader

Biểu tượng loader có nhiều dạng - thật sự chỉ bị giới hạn bởi trí tưởng tượng của chúng ta mà thôi. Tôi sẽ cho bạn thấy hai ví dụ, tôi hy vọng sẽ đóng vai trò như là nguồn cảm hứng cho bạn để làm cho ý tưởng của bạn thành hiện thực.

Ví Dụ 1

Đối với ví dụ đầu tiên, tôi sẽ bắt đầu với <svg> sau đây:

Bây giờ, hãy thêm ba hình chữ nhật, cuối cùng sẽ thay đổi chiều cao của chúng để gợi ý nội dung đang tải. Đây là cái đầu tiên:

Và đây là hai cái sau - bạn sẽ thấy chúng giống hệt nhau, nhưng có màu fill khác nhau, được dịch chuyển dọc theo trục x và có các hoạt ảnh hơi trễ:

Nó cho chúng ta một hoạt hình đang tải khá đẹp! Hãy làm cho nó đẹp hơn một chút bằng cách hoạt hình position y của mỗi hình chữ nhật. Để làm điều đó, chúng ta cần thêm ba phần tử <animate />:

Ví Dụ 2

Ví dụ cuối cùng này hơi phức tạp hơn một chút, vì nó liên quan đến việc tạo ra SVG trong một phần mềm khác, sau đó sao chép nó sang một code editor, sau đó hoạt hình các thuộc tính của nó.

Tuy nhiên, chúng ta sẽ bắt đầu với cách quen thuộc, viết code một <svg> bằng tay:

Đối với <svg> chúng ta thêm một <path> với một số thuộc tính cơ bản:

Đối với nội dung của d (xác định cách thức path được vẽ ra) chúng ta sẽ cần một ít trợ giúp, do đó, hãy mở Adobe Illustrator lên và bắt đầu vẽ (hoặc chỉ cần sao chép code dưới đây)

Bây giờ hãy hoạt hình <path> của chúng ta bằng cách xoay nó, giống như chúng ta đã làm ở trong ví dụ đầu tiên. Chúng ta thêm <animateTransform /> sau đây:

Xong rồi! Bây giờ chúng ta có một biểu tượng loader xoay xoay. Để xem bạn có thể cải tiến gì cho nó không nhé!

Tóm tắt

Trong bài hướng dẫn này, chúng ta bắt đầu với những kiến thức cơ bản, học cách sử dụng phần tử <animate /> bên trong một SVG được viết bằng tay. Sau đó chúng ta xây dựng trên đó bằng cách đưa ra phần tử <animateTransform />. Tiếp theo, chúng ta lấy những gì đã học được và tạo biểu tượng loader của chính mình. Sau cùng, chúng ta đã tạo ra một biểu tượng khác, nhưng bằng cách sử dụng phần <path> phức tạp hơn nhờ sự trợ giúp của Adobe Illustrator.

Các bước này sẽ giúp bạn hiểu rõ cách hoạt hình của SVG Animation. Tôi mong được gặp lại bạn trong phần hướng dẫn tiếp theo!

Các Liên kết Hữu ích

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.