Đa giác css codepen

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 img2 và bỏ thuộc tính nhận xét img3

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à img5

Đố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 img7 để lấy lớp img8

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

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 path2 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