Vẽ Biểu trưng Alligator.io SVG bằng GreenSock

---

Để tận dụng tối đa bài viết này, điều quan trọng là bạn phải hiểu rõ về JavaScript. Ta sẽ chỉ tập trung vào việc tìm hiểu GreenSock trong bài viết này, vì vậy nếu bạn chưa sử dụng JavaScript trước đây thì hãy học và quay lại!

Greensock là gì?

GreenSock là một thư viện hoạt ảnh JavaScript giúp ta tiết kiệm rất nhiều khi tạo hoạt ảnh, đặc biệt là khi nói đến khả năng trình duyệt chéo. GreenSock cũng có thể được gọi là GSAP (GreenSock Animation Platform) và tôi sẽ sử dụng thay thế cho cả hai. Về cơ bản GSAP có thể tạo hoạt ảnh cho bất kỳ thuộc tính nào bạn ném vào nó, từ thuộc tính CSS đến thuộc tính SVG.

GSAP có nhiều công cụ bạn có thể sử dụng, bao gồm:

• TweenLite , như tên của nó, là một version nhẹ
• TweenMax chứa đầy đủ sức mạnh của GSAP
• TimelineLite & TimelineMax là các công cụ sắp xếp thứ tự giúp quản lý thời gian của các hoạt ảnh của ta

GSAP có thể được cài đặt dưới dạng module npm :

$ npm install gsap 

Hoặc được tải thông qua thẻ script:

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js>"></script> 

Kiến thức cơ bản về GreenSock

Để chứng minh GreenSock, tôi sẽ sử dụng Codepen. Bạn có thể đặt bút tại đây mà GreenSock đã được cài đặt .

Hãy bắt đầu từ cơ bản và tạo hoạt ảnh cho một hình vuông màu đỏ trên màn hình bằng cách sử dụng phương pháp to của GSAP. Ta tạo hình vuông màu đỏ như vậy:

<style>   #element {     height: 150px;     width: 150px;     background: red;   } </style> <div id="element"></div> 

Để làm động điều này, ta truyền 3 đối số to phương thức to , các đối số là:

.to(elToAnimate, duration, propToAnimate) 

Vì vậy, trong trường hợp của ta , phần tử ta muốn tạo hiệu ứng là #element , thời lượng là 1 giây và vì ta muốn di chuyển hình vuông nên đối số cuối cùng của ta là một đối tượng nhắm đến thuộc tính x . Mã của ta là:

TweenMax.to("#element", 1, { x: 100 }) 

Điều này cho ta những điều sau:

Đừng lo lắng về ảnh gif, nó mượt mà hơn nhiều trong đời thực, như bạn sẽ thấy trên Codepen!

Giả sử bây giờ ta muốn xoay hình vuông của bạn , tất cả những gì ta cần làm là:

TweenMax.to("#element", 3, { rotation: 360 }); 

Bạn có thể làm cho rotation này trở nên vô hạn bằng cách thêm repeat:-1 vào đối tượng của ta . Bạn cũng có thể thêm thuộc tính yoyo tính này sẽ luân phiên hoạt ảnh giữa ngược và xuôi.

Ta có thể bắt đầu từ một vị trí khác bằng phương thức fromTo . Điều này tương tự như phương thức to nhưng ta có thể cung cấp thêm một đối tượng mà ta muốn hoạt ảnh của bạn bắt đầu. Nếu ta muốn bình phương của ta bắt đầu ở x:300 thì ta chuyển điều này làm đối số thứ ba cho fromTo .

Mã khôn ngoan như sau:

TweenMax.fromTo("#element", 3, {x: 300}, { x: 100 });  

Trực quan:

Ta có thể làm nhiều hơn là thay đổi vị trí của hình vuông của ta , ta cũng có thể nhắm đến thông tin như độ mờ:

TweenMax.fromTo("#element", 5, {opacity: 0}, { opacity: 1 }); 

, ta sử dụng phương thức fromTo và bắt đầu opacity của ta ở 0 và kết thúc ở 1 .

Ok, tôi chắc chắn rằng bạn đang cực kỳ chán nản ngay bây giờ vì ta hãy thành thật mà nói ở trên khá nhàm chán. Hãy làm điều gì đó thú vị hơn, ta sẽ sử dụng biểu tượng Alligator.io và làm điều gì đó thú vị!

Hoạt ảnh logo Alligator.io SVG

Tôi đã lấy trộm logo Alligator.io từ trang web, hy vọng Seb không phiền. Đây là bút khởi động với SVG bên trong của ta .

Vì vậy, mục tiêu của ta với hoạt ảnh này sẽ là draw logo và mờ dần trong màu xanh lá cây.

Điều đầu tiên ta cần làm là cài đặt một stroke-dasharray và stroke-dashoffset trên đồ họa của ta . Đây là những thuộc tính ta sử dụng để mô phỏng một hiệu ứng vẽ, bạn có thể đọc thêm về các thuộc tính này tại đây .

Trong CSS của ta , ta cài đặt những điều sau:

#alligator path {   stroke-dasharray: 600;   stroke-dashoffset: 600;   fill-opacity: 0; // we will animate the fill in } 

Với vị trí này, con cá sấu của ta giờ đã biến mất. Hãy quay lại hoạt ảnh bằng TweenMax .

Ta sử dụng phương thức to mà ta đã sử dụng ở trên, sau đó ta đặt tập hợp stroke-dashoffset của ta là 0 .

TweenMax.to("#alligator path", 15, { "stroke-dashoffset": 0 }) 

Ta sử dụng cùng một bộ chọn mà ta đã sử dụng trong #alligator path CSS #alligator path , đặt khoảng thời gian là 0 và sau đó đặt bộ stroke-dashoffset của ta thành 0 . Điều này mang lại một hiệu ứng vẽ thực sự tuyệt vời:

Thật tuyệt làm sao? !! ✨

Bây giờ điều tiếp theo ta cần làm là lấy lại màu sắc của ta . Ta làm điều này bằng cách thêm một thuộc tính bổ sung vào đối tượng của ta .

TweenMax.to("#alligator path", 15, { "stroke-dashoffset": 0, "fill-opacity": 1 }) 

Vấn đề mà ta hiện đang gặp phải là thời lượng khá dài và điều này trông hơi kỳ lạ với thuộc tính fill-opacity . Lý tưởng nhất là những gì ta muốn là vẽ đầu tiên, sau đó khi hoàn thành ta sẽ điền vào hình ảnh. Cách cũ để đạt được điều này là có hai hoạt ảnh riêng biệt với hoạt ảnh thứ hai có độ trễ phù hợp với thời lượng của hoạt ảnh đầu tiên. GreenSock cung cấp cho ta TimelineMax tuyệt vời thực hiện điều này cho ta .

Dòng thời gianMax

Điều đầu tiên ta cần làm là tạo một thể hiện của lớp TimelineMax như sau:

const tl = new TimelineMax() 

Sau đó, ta gọi phương thức to trên version của ta và chuyển cho nó hiệu ứng vẽ của ta :

tl.to("#alligator path", 10, { "stroke-dashoffset": 0 }) 

Sau đó, ta gọi lại phương thức to nhưng lần này là đối với fill-opacity của ta :

tl.to("#alligator path", 5, { "fill-opacity": 1 }) 

Với điều đó tại chỗ, sau đó ta nhận được những điều sau:

TimelineMax cực kỳ mạnh mẽ và điều này chỉ mới làm trầy xước bề mặt, việc tạo các hoạt ảnh tuần tự chưa bao giờ dễ dàng hơn thế!

Kết luận

Đây là phần giới thiệu nhanh về GreenSock và các phương pháp phổ biến nhất. Đó là một công cụ thực sự mạnh mẽ và nếu bạn thích tạo ảnh động thì bạn thực sự nên cân nhắc sử dụng nó cho dự án tiếp theo của bạn !

---

---

Các tin liên quan