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 ả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 ý. To see been Code, you please to Codepen. io to CAPTCHA trước mã. Sau đó hãy tải lại bài viết này
SVG first of 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 SVG nội tuyến [điều kiện này có nghĩa là dữ liệu SVG được thêm vào HTML của bạn, thay vì chỉ liên kết .svg
trong thẻ img
]
SVG chúng tôi muốn tạo hiệu ứng động phải có đường dẫn [nếu bạn đang tạo cấu hình SVG động cơ bản, thì nó phải được chuyển đổi thành đường dẫn]
Dưới đây là ví dụ về đường dẫn cho một ngôi sao hình sao bằng 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 lớp “sao” vào đường dẫn để SVG dễ làm việc hơn
Đường dẫn SVG cũng phải có nét thuộc tính. 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ẽ
Hoạt hình với khung hình chính và đột quỵ-dasharray
Bây giờ chúng ta muốn tạo đột quỵ hiệu ứng
Ở đâ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 nét 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 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ó đặt lại trở về 50 khi kích 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 đột quỵ
Được rồi, vì vậy bây giờ chúng ta đã di chuyển 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 tôi có thể thiết lập thuộc tính stroke-dasharray
bằng độ dài của SVG của chúng tôi
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 động ảnh của mình để 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 kích hoạt lại ảnh của mình [có thể không lặp lại], bạn cần phải áp dụng
chế độ hoạt hình-điền. tiền đạo;
Sao cho hoạt ảnh của bạn ở giá trị đột quỵ cuối cùng thay vì đặt lại
Bạn có thể xem các kỹ năng trong CodePen ở trên bằng cách loại bỏ thuộc tính img
2 và bỏ thuộc tính nhận xét img
3
Do đó làm thế nào để có được chiều dài của đường dẫn?
Nếu bạn 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 JavaScript thức 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à 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 đường dẫn với một vài dòng mã
để đường dẫn = tài liệu. truy vấnSelector[". ngôi sao"];
đặt độ dài = đường dẫn. getTotalLength[];
Hãy chia nhỏ những gì đang xảy ra ở đây. Chúng ta đang tạo hai biến. path
và img
5
Đố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 img
7 để lấy lớp img
8
Sau đó chúng ta sẽ lấy biến path
và sử dụng phương thức path
0 để gán chiều dài của phần tử cho biến img
5
Nếu cách này khiến bạn hơi khó hiểu một chút, bạn có thể chỉ cần thêm
vào mã 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 mã của bạn
Nếu bạn muốn quá trình tự động hóa tốt hơn, bạn có thể viết
con đường. Phong cách. nétDasharray = chiều dài + ' ' + chiều dài;
con đường. Phong cách. strokeDashoffset = chiều dài;
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 loại CSS của bạn
Ví dụ về Aimation bằng cách sử dụng JavaScript
Hoạt động nhiều phần tử của ảnh?
Chúng ta thường muốn tạo ra nhiều hơn một con đường 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 từng lớp đường dẫn riêng của nó và nhận được chiều dài cho mỗi lớp đường dẫn
Nói chung, bạn không muốn mọi con đường bắt đầu hoạt động cùng một lúc, vì vậy bạn có thể áp dụng path
2 khác nhau cho các đường dẫn để 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 hoạt hình để 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 phải chuyển đổi văn bản đó thành đường dẫn SVG [bạn có thể tìm thấy hướng dẫn về cách thực hiện công việc này]
Một điều cần lưu ý là nét thuộc tính sẽ tạo ra 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 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 mà bạn có thể từ nghiên cứu. Nếu cú bắt 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, chắc chắn 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 [Từ năm 2002]. Học lập trình viên. Action ngay
Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT. 02435574074 - 0914939543
E-mail. xin chào@niithanoi. giáo dục. vn
trang chủ. https. //Facebook. com/NIIT. CNTT-TT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #python #java #php