Bắt đầu với nền tảng hoạt hình Greensock

Nền tảng hoạt hình Greensock (GSAP) cho phép bạn hoạt hình bất cứ thứ gì bạn có thể truy cập với JavaScript bao gồm DOM, Canvas và CSS, cũng như các đối tượng tùy chỉnh của riêng bạn.

GSAP cũng giúp giải quyết sự không nhất quán của trình duyệt để dễ dàng hơn Kiểm tra người dùng (tốt web hosting Có thể giúp ở đây), cho phép bạn sử dụng các đối tượng để quản lý hình ảnh động phức tạp và chạy nhanh hơn 20 lần so với jQuery. Nó đã trở thành một tiêu chuẩn trong ngành, và đã được sử dụng trong vô số trang web giành giải thưởng. Có một trang web để xây dựng? Đây là hướng dẫn của chúng tôi để tốt nhất người tạo ra trang web xung quanh.

01. Thiết lập tệp HTML cơ bản

Cách tốt nhất để học GSAP là nhìn thấy nó trong hành động. Trong hướng dẫn này, bạn sẽ tìm hiểu về các tính năng chính của nền tảng với các ví dụ làm việc mà bạn có thể sử dụng trong các dự án của mình ngay hôm nay!

Bắt đầu bằng cách thiết lập một tệp HTML cơ bản, nơi bạn có thể thả mã JavaScript của mình. Bao gồm một hình ảnh với một Logo lớp học. Bạn sẽ sử dụng GSAP để animate Properties để xem cách thức hoạt động.

 & lt; html lang = "en" & gt;
& lt; Head & GT;
  & lt; phong cách & gt;
    .logo {width: 150px; Không thể
  & lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; IMG Class = "Logo"
src = "logo.svg" / & gt;
& lt; script & gt;
// mã tại đây
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. Bao gồm thư viện GSAP

Tiếp theo, bạn sẽ cần thêm GSAP vào dự án web của mình. Giữa bạn & lt; hình ảnh & gt; và & lt; script & gt; Tags, chèn một liên kết đến thư viện gsap. Bạn có thể tải xuống zip trực tiếp từ đây , hoặc lấy nó từ GitHub. (Nếu bạn có tệp để chia sẻ, hãy chọn hoàn hảo lưu trữ đám mây ). Các tệp cũng được lưu trữ trên Cloudflare CDN siêu nhanh, do đó, cách đơn giản nhất là sử dụng các tệp được lưu trữ như thế này:

 & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/tweenmax.min.js" & gt; & lt; 

03. Animate với tweening

Tweening là quá trình thay đổi một giá trị theo thời gian để tạo một hình ảnh động. Ví dụ: di chuyển một đối tượng từ A đến B, mở rộng nó hoặc xoay nó. Bạn cũng có thể mười hai giá trị tùy chỉnh của riêng bạn.

Cách đơn giản nhất đến mười hai một tài sản là để sử dụng Tweenmax.to () chức năng. Điều này cần một đối tượng mục tiêu, một thời lượng và các cặp thuộc tính / giá trị bạn đang hoạt hình. Để xem chức năng trong hành động, hãy thử từng dòng mã bên dưới bằng cách sử dụng Logo Là đối tượng mục tiêu:

 // tween x vị trí từ hiện tại
đến 400 trên 2 giây
Tweenmax.to (". Logo", 2, {x: 400});
// Vị trí Tween Y từ hiện tại
đến 200 và Opacity thành 0, trên 1
thứ hai
Tweenmax.to ("logo", 1, {y: 200, độ mờ: 0});
// tween x và y đến 100, tỷ lệ để
1.5, và xoay 90 độ, trên 2
thứ hai
TweenMax.to ("Logo", 2, {X: 100, Y: 100, Tỷ lệ: 1.5, Xoay: 90}); 

04. Tween từ và từ

Bạn có thể tween một tài sản từ giá trị hiện tại của nó sang một tài sản mới bằng cách sử dụng đến() , nhưng bạn cũng có thể mười hai từ một giá trị cho giá trị hiện tại của nó. Ví dụ: nếu của bạn Logo đang bắt đầu tại vị trí x 0. Và bạn muốn nó kết thúc ở đó, bạn có thể làm điều này:

 TweenMax.From ("logo", 2, {x: 400}); 

Trong trường hợp này, logo của bạn sẽ ngay lập tức di chuyển đến x = 400. và sau đó tween đến x = 0. . Bạn thậm chí có thể xác định cả giá trị bắt đầu và kết thúc, bỏ qua các giá trị hiện tại bằng cách sử dụng từ () như thế này:

 TweenMax.fromto (". Logo", 2, {x: 400}, {x: 200}); 

05. nới lỏng.

Nới lỏng là 'phong cách' hoạt hình, như các giá trị chuyển từ A đến B. Thay vì tốc độ không đổi, được gọi là 'tuyến tính', bạn có thể áp dụng các chức năng để uốn cong tốc độ. Họ bắt đầu chậm và dần dần tăng tốc? Họ có đến một điểm dừng đột ngột và nảy một chút ở cuối? Trong hoạt hình những phong cách này thêm nhân vật và cảm xúc vào công việc của bạn. Bạn có thể áp dụng một chức năng nới lỏng như thế này:

 TweenMax.to ("Logo", 2, {X: 100, Y: 100, Xoay: 90, Dễ: Circ.Easein}); 

06. Hàm nới lỏng và vào / ra

GSAP bao gồm nhiều chức năng nới lỏng, chẳng hạn như trở lại Cái gì nảy Cái gì đàn hồi Cái gì tội Cái gì Circ. , và Triển lãm . Bạn cũng có thể đã nhận thấy rằng giảm bớt chức năng có một tài sản của dễ dàng trong , mà chúng tôi đã sử dụng ở bước trên. Bạn cũng có thể dùng EASTOUT. và Easinout. . Chúng chỉ ra nơi đường cong nới lỏng được áp dụng trong hình động. Hãy thử những điều sau đây để xem kết quả:

 // nới lỏng với một sự nảy
Tweenmax.to ("logo", 2, {x: 100, Y: 100, Xoay: 90, Dễ: Bounce.EeOut});
// nới lỏng trong và ngoài với đàn hồi
TweenMax.to (". Logo", 2, {x: 100, Y: 100, Xoay: 90, Dễ: đàn hồi.EaseInout}); 

07. trì hoãn một tween

Đôi khi bạn sẽ muốn trì hoãn việc bắt đầu một hình ảnh động, để đồng bộ hóa nó bằng một hình ảnh động khác hoặc để làm cho nó chờ đợi một sự kiện xảy ra. Bạn có thể sử dụng một thuộc tính đặc biệt của một GSAP được gọi là sự chậm trễ để làm điều này. Hãy thử mã sau để xem cách bạn có thể trì hoãn TWENS cho thời gian cụ thể:

 TweenMax.to (". Logo", 1, {y: 100, dễ dàng: Bounce.EeOut});
// trì hoãn tween này bằng 1 giây
TweenMax.to ("logo", 1, {xoay: 90, dễ dàng: Circ.EeOut, độ trễ: 1}); 

08. Chức năng gọi lại.

Để tích hợp các hình động với mã của bạn, điều quan trọng là phải biết khi các sự kiện xảy ra, đặc biệt là khi một hình ảnh động kết thúc hoặc bắt đầu. Bạn có thể dùng oncomplete. gọi lại sự kiện cho việc này. Bạn có thể muốn biết khi nào một tween bắt đầu, sử dụng băt đâu . Và bạn cũng có thể muốn đồng bộ hóa mười hai với một hình ảnh động khác hoặc sử dụng tween và việc nới lỏng để cập nhật một số đối tượng tùy chỉnh khác. Sử dụng onupdate. gọi lại cho việc này. Đây là cách bạn sử dụng cuộc gọi lại:

 tweenmax.to (". Logo", 1, {
Y: 100,
Dễ dàng: Bounce.EeOut,
oncomplete: Tweencomplete.
});
Chức năng Tweennencomplete () {
Console.log ("Tween hoàn thành");
} 

09. Tham số gọi lại

Khi bắn các cuộc gọi lại, bạn có thể muốn truyền thông tin cùng với cuộc gọi lại cho chức năng xử lý nó. Bạn có thể cần phải thông qua thông tin về người gọi hoặc các giá trị cụ thể. Điều này cho phép bạn tích hợp hình ảnh động của mình với phần còn lại của cơ sở mã của bạn. Tất cả các tham số được thông qua qua gọi lại + "params" , đó là onupdateparams. .

Trong ví dụ sau, bạn có thể theo dõi tiến trình của Tween bằng từ khóa {tự} và có thể xem cách vượt qua nhiều tham số bằng cách sử dụng một mảng:

 tweenmax.to (". Logo", 1, {
Y: 100,
Dễ dàng: Bounce.EeOut,
onUpdate: TweenUpdate,
onupdateparams: ["{tự}",
"Đã hoàn thành"]
});
Hàm TweenUpdate (Tween,
thông điệp) {
Phần trăm var = tween.
tiến độ () * 100; // phát triển()
là một giá trị 0-1
Console.log (Tỷ lệ phần trăm +
"" + tin nhắn);
} 

10. Kiểm soát hình ảnh động

Được rồi, vì vậy bây giờ bạn có thể tạo thanh thiếu niên và giảm bớt thanh thiếu niên, gọi lại và tham số. Nhưng làm thế nào để bạn kiểm soát hình ảnh động? Thông thường bạn muốn bắt đầu hoặc ngăn chặn họ dựa trên các sự kiện khác.

Nếu bạn cần dừng hình ảnh động, bạn có thể sử dụng tạm ngừng() phương pháp. Nếu bạn muốn tiếp tục một tween, hãy sử dụng sơ yếu lý lịch() . Để hoàn toàn phá hủy một tween sử dụng giết chết() . Hãy thử những điều sau đây và xem những gì xảy ra:

 // var để giữ tham chiếu đến Tween
var tween = tweenmax.to (".
Logo ", 2, {Y: 100, Dễ: Bounce.
EASHOUT});
// Tạm dừng ngay lập tức
tween.pause ();
// bắt đầu trong sự kiện
setTimeout (hàm () {tween.
tiếp tục ()}, 1000);
// Hoạt hình ngược trên sự kiện
setTimeout (hàm () {tween.
đảo ngược ()}, 3000); 

11. CSS và CSSplugin

CSSplugin được bao gồm khi bạn sử dụng TweenMax. . Đó là một tiết kiệm thời gian khổng lồ, trong đó nó bình thường hóa các hành vi trên các trình duyệt và tự động phát hiện khi cần thiết cho hình ảnh động. CSSPlugin có thể xử lý thanh thiếu niên màu, hình ảnh động SVG và hiệu suất tối ưu hóa với bộ nhớ đệm và các thủ thuật bên trong khác - và nó thường hiệu quả hơn để dịch các vị trí thông qua CSS.

Bạn đã thấy điều này trong hành động khi bạn sử dụng Opacity. và Chức vụ hình ảnh động. Nó hoạt động mà không có bất kỳ mã hóa đặc biệt!

12. Biến đổi 2D và 3D

Các biến đổi CSS cho phép bạn chia tỷ lệ, xoay dịch và nghiêng. Chúng hoạt động ở cả 2D và 3D để tạo hiệu ứng đẹp một cách nhanh chóng. GSAP bao gồm các thuộc tính biến đổi tích hợp như X. Cái gì Y. Cái gì Vòng xoay Cái gì luân chuyển Cái gì luân chuyển. Cái gì Skewx. và tỉ lệ . Hãy thử áp dụng tween sau vào hình ảnh của bạn thay vì những cái chúng tôi đã thử:

 TweenMax.to (". Logo", 3, {
x: 100,
Y: 100,
Tỷ lệ: 1.5,
Xoay: 360,
Dễ dàng: Bounce.EeEut}); 

13. Timelines.

Khi bạn di chuyển ngoài một hoặc hai thanh thiếu niên, bạn có thể tự hỏi làm thế nào để quản lý nhiều hình động. GSAP bao gồm A. mốc thời gian đối tượng để làm chính xác điều đó. Bạn nối Tween đến mốc thời gian đối tượng và có thể sử dụng Chức vụ tham số sau mười hai theo thời gian họ. Bạn có thể có TWENS chạy hết lần này đến lần khác, hoặc có khoảng trống, hoặc thậm chí trùng lặp chúng. Thêm một vài hình ảnh thêm vào HTML của bạn với các lớp logo2. và logo3. tương ứng.

Để xem nó hoạt động như thế nào, hãy thử những điều sau đây mốc thời gian Mã:

 // Tạo một ví dụ dòng thời gian
var tl = new timelinemax ();
tl.add (tweenmax.to (". logo", 1,
{x: 50}));
// Lưu ý "0" cuối cùng để thực hiện
Cái này bắt đầu lúc 0 giây.
tl.add (TweenMax.to (". logo2", 1,
{y: 100}), "0");
// Lưu ý "+.25" để thực hiện việc này
một bắt đầu ở 0,25 giây
tl.add (tweenmax.to (". logo3", 1,
{Xoay: 180, Y: 50,
X: 50}), "+. 25"); 

14. Kiểm soát dòng thời gian

Cũng như kiểm soát hình ảnh động, bạn cũng có thể muốn kiểm soát các mốc thời gian. May mắn thay, bạn có thể tạm dừng, tiếp tục và đảo ngược giống như bạn có thể với hình ảnh động. Bạn cũng có thể thêm các tham số vào dòng thời gian để nói lại Cái gì yoyo. và thêm các cuộc gọi lại cho toàn bộ thời gian. Bạn cũng có thể kiểm soát tốc độ của dòng thời gian bằng cách sử dụng timescale. bất động sản. Hãy thử thay thế Tuyên bố dòng thời gian của bạn bằng mã sau để xem cách thức hoạt động:

 var tl = new timelinemax ({
// lặp lại vô hạn.
Lặp lại: -1,
yoyo: đúng,}); 

15. Nhận và thiết lập các thuộc tính

Một tính năng thực sự hữu ích là nhận và đặt các thuộc tính của Thanh thiếu niên và Timelin. Bằng cách đó, bạn có thể biết về tiến trình và thời gian tổng thể, hoặc thu thập thông tin khác, về một đối tượng GSAP. Ví dụ về mã này, bạn có thể được thời lượng của dòng thời gian, và sau đó bộ thời lượng của nó để thay đổi nó. Điều này hoạt động tương tự cho thanh thiếu niên là tốt. Đó là một cách tuyệt vời khác để phản ứng trong thời gian thực với các sự kiện, và sửa đổi hình ảnh động trên đường bay. Thêm phần sau sau mã thời gian trước đó của bạn:

 // Nhận thời lượng hiện tại của
dòng thời gian
Console.log (tl.duration ());
// Đặt thời lượng thành 5 giây
Sau 2 giây chờ đợi
setTimeout (hàm () {
tl.duration (5);
}, 2000); 

Bài viết này ban đầu được xuất bản trong nhà thiết kế web thiết kế web sáng tạo. Mua số phát hành 279. hoặc là đăng ký. .

Đọc thêm:

• Hoạt hình SVG SVG với GSAP
• Xuất hình ảnh động hiệu ứng sang HTML5
• Cách tạo hình ảnh động quy mô cho tất cả các thiết bị