SVG Line Animation cho người mới bắt đầu

Tôi thích SVG line Animation vì chúng là hiệu ứng tuyệt vời. Nó đơn giản, nhưng cũng đủ để bạn có thể sử dụng nó làm hình ảnh động SVG đầu tiên của mình.

SVG đầu tiên của tôi

Bạn không biết SVG là gì? Hoàn toàn không sao! Tôi cũng đã phải Google “SVG là gì” trước khi đặt bút viết bài này! Tôi sẽ không đi sâu vào đây, nhưng Google có rất nhiều tài nguyên tuyệt vời giải thích về SVG và cách tạo ra SVG!

Chuẩn bị cho SVG của bạn

Để làm được hiệu ứng này, chúng ta cần bắt đầu với một inline SVG (điều này có nghĩa là dữ liệu SVG được chèn vào HTML của bạn, thay vì chỉ liên kết .svg trong thẻ hình ảnh).

SVG chúng ta muốn tạo hiệu ứng động phải có path (nếu bạn đang tạo hình động SVG cơ bản, nó sẽ cần phải được chuyển đổi thành đường path). Dưới đây là ví dụ về path cho một hình ngôi sao bằng SVG.

<path class="star" d="M246.573,89.84l42.511,126.463l137.566,0l-111.293,78.158l42.51,126.462l-111.294,-78.158l-111.293,78.158l42.51,-126.462l-111.293,-78.158l137.566,0l42.51,-126.463Z"/>

Lưu ý rằng nó có một phần tử được gọi là "path" theo sau là chữ cái "d" và một loạt các số. Tôi đã thêm class “star” vào path để làm cho SVG dễ làm việc hơn.

Path SVG cũng phải có thuộc tính stroke. Chúng ta có thể sử dụng CSS để điều chỉnh chiều rộng và màu sắc của nét vẽ.

.star {
    fill: none;
    stroke: #7d2d68;
    stroke-width: 17px;

Animate với khung hình chính và stroke-dasharray

Bây giờ chúng ta muốn tạo hiệu ứng stroke. Ở đây chúng ta có thể sử dụng một thủ thuật đơn giản với các thuộc tính stroke-dasharray và stroke-dashoffset để thực hiện công việc này.

Stroke-dasharray làm cho stroke SVG của chúng ta bị gạch ngang bởi bất kỳ giá trị nào chúng ta đưa ra.

Trong khi stroke-dashoffset bù đắp dấu gạch ngang bằng bất kỳ giá trị nào chúng ta cho nó.

Trong ví dụ bên dưới, tôi đã đặt stroke-dasharray và stroke-dashoffset thành 50.

Để làm cho nó trông giống như nó đang di chuyển, tôi đã thiết lập một hình ảnh động, trong đó 100% thuộc tính stroke-dashoffset di chuyển về 0.

Điều này có vẻ hơi thay đổi vì nó reset trở lại 50 khi hoạt ảnh lặp lại, nhưng bạn có thể thấy rằng hoạt ảnh có điểm bắt đầu và điểm kết thúc rõ ràng dựa trên thuộc tính stroke.

Ok, vì vậy bây giờ chúng ta đã di chuyển dấu gạch ngang, làm thế nào để chúng ta nhận được một dòng hoạt ảnh?

Vâng, chúng ta có thể thiết lập thuộc tính stroke-dasharray bằng với độ dài của SVG của chúng ta.

Sau đó, nếu chúng ta áp dụng cùng một giá trị cho thuộc tính stroke-dashoffset, dòng sẽ biến mất trực quan vì nó sẽ được bù đắp qua đầu SVG.

Tiếp nữa, khi chúng ta sử dụng hoạt ảnh của mình để di chuyển thuộc tính về 0, có vẻ như chúng ta đang có hình ảnh tự vẽ.

Nếu bạn không muốn hoạt ảnh của mình lặp lại (có thể không lặp lại), bạn sẽ cần phải áp dụng:

animation-fill-mode: forwards;

sao cho hoạt ảnh của bạn ở giá trị stroke cuối cùng thay vì reset. Bạn có thể xem kỹ trong CodePen ở trên bằng cách loại bỏ thuộc tính infinite và bỏ comment thuộc tính animation-fill-mode: forwards;

Vậy làm thế nào để chúng ta có được chiều dài của path?

Nếu bạn chỉ mới bắt đầu và vẫn cảm thấy không dễ dàng với JavaScript, hãy làm theo cách "thử sai" để có được chiều dài của đường dẫn SVG.

Toàn bộ hoạt ảnh đầu tiên của tôi được thực hiện với sự hiểu biết về JavaScript là 0, đó cần rất nhiều kiên nhẫn.

Nếu đây là nơi bạn đang như vậy, hãy thử làm hoạt hình! Thực hành là một cách tuyệt vời để nâng cao kỹ năng của bạn, và tôi cũng thích bạn KHÔNG CẦN JavaScript để thực hiện điều này!

Nếu bạn cảm thấy thoải mái khi bạn biết một chút JavaScript, bạn có thể nhận được chiều dài của path với một vài dòng mã.

let path = document.querySelector(".star");
let length = path.getTotalLength();

Hãy chia nhỏ những gì đang xảy ra ở đây. Chúng ta đang tạo hai biến: path và length.

Đối với biến path, chúng ta gán cho nó một giá trị bằng cách sử dụng phương thức document.querySelector() để lấy class “star”.

Sau đó chúng ta sẽ lấy biến path và sử dụng phương thức .getTotalLength() để gán chiều dài của phần tử cho biến length.

Nếu đây là cách khiến cho bạn hơi khó hiểu một chút, bạn có thể chỉ cần thêm:

console.log(length);

vào code của bạn, mở bảng điều khiển của bạn và chuyển theo cách thủ công chiều dài của đường dẫn đến code của bạn.

Nếu bạn muốn quá trình tự động hơn, bạn có thể viết:

path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;

trong JavaScript của bạn, và điều này sẽ lấy độ dài mà bạn vừa nhận và áp dụng nó trực tiếp cho các kiểu CSS của bạn.

Ví dụ về hoạt ảnh bằng cách sử dụng JavaScript

Làm hoạt ảnh nhiều phần tử?

Chúng ta thường muốn tạo ra nhiều hơn một path tại một thời điểm nếu chúng ta sử dụng nó cho các bản vẽ đường thẳng.

Điều này có thể đạt được bằng cách sử dụng cùng một phương thức cho mỗi path class riêng của nó, và nhận được chiều dài cho mỗi class path.

Nói chung, bạn không muốn mọi con đường bắt đầu hoạt ảnh cùng một lúc, vì vậy bạn có thể áp dụng animation-delay khác nhau cho các path để có được hiệu ứng so le.

Một lần nữa, bạn có thể làm điều này thủ công với một số thử nghiệm, hoặc bạn có thể bắt đầu nhìn vào những thứ như thư viện animation để giúp bạn.

Còn về văn bản động?

Nếu bạn muốn tạo hiệu ứng văn bản từ phông chữ, bạn sẽ phải tạo văn bản bạn muốn tạo hiệu ứng với phông chữ đó trong chương trình cho phép bạn tạo SVG.

Sau đó, bạn sẽ phải chuyển đổi văn bản đó thành path SVG (bạn có thể tìm thấy hướng dẫn về cách thực hiện việc này).

Một điều cần lưu ý là thuộc tính stroke sẽ tạo một đường viền xung quanh văn bản, vì vậy nó sẽ không hoạt động như chữ viết tay, bạn sẽ cần phải tạo văn bản đơn giản để troke làm như vậy.

Trong ví dụ đầu tiên của tôi, tôi đã vẽ văn bản của riêng mình trong phần mềm minh hoạ vector cho hiệu ứng chữ viết tay.

Một điều cần ghi nhớ với văn bản là nếu bạn không cung cấp cho SVG một tiêu đề, văn bản sẽ không được đọc bởi người đọc màn hình vì nó là một hình ảnh.

Vì vậy, hãy chắc chắn rằng bạn nghĩ về khả năng tiếp cận khi sử dụng văn bản và cung cấp cho màn hình một cái gì đó để đọc!

Trên đây là một hướng dẫn cơ bản về SVG line Animatiion bạn có thể từ từ nghiên cứu. Nếu nắm bắt được vấn đề này thì tôi nghĩ bạn là đối tượng săn đuổi của rất nhiều doanh nghiệp.