Mình thích SVG line Animation vì chúng là cách để tạo ra hiệu ứng tốt hơn khi Lập trình Web.
Bài hướng dẫn này rất đơ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 line Animation cơ bản
Quan trọng là mình nghĩ ai cũng có thể bắt đầu học SVG từ bài hướng dẫn này của mình.
Lưu ý: Để xem được Code thì bạn cần vào Codepen.io để vượt mã CAPTCHA trước. Sau đó hãy load lại bài viết này.
SVG đầu tiên của mình
Bạn không biết SVG là gì?
Hoàn toàn không sao cả! Mình cũng đã phải Google “SVG là gì” trước khi đặt bút viết bài này!
Mình sẽ không đi sâu vào vấn đề nà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ị tạo SVG của riêng 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ẻ img).
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 góc hình ngôi sao bằng SVG.
<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"/>
</svg>
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ố.
Mình đã 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, mình đã đặt stroke-dasharray và stroke-dashoffset thành 50.
Để làm cho nó trông giống như nó đang di chuyển, mình đã 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 để 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ộ animation đầu tiên của mình được làm với kiến thức JavaScript là 0, cũng mất rất nhiều thời gian.
Nếu bạn cũng đang như vậy, hãy thử CSS Animation.
Thực hành là một cách tốt nhất để nâng cao kỹ năng của bạn, và mình cũng thích bạn KHÔNG CẦN JavaScript để thực hiện điều này!
Nếu bạn biết một chút về 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 cách này làm 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ề Aimation 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ề Text Animation?
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 mình, mình đã 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ì mình nghĩ bạn là đối tượng săn đuổi của rất nhiều nhà tuyển dụng.
> Tham khảo: KHÓA HỌC LẬP TRÌNH (Full stack) để học bài bản, vững chắc về lập trình web.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #python #java #php