Hoạt ảnh web hiện đại với Gsap và Vue 3

Apr 09 2022

Này, và chào mừng bạn đến với hướng dẫn này! Hôm nay bạn sẽ học cách tạo các hình ảnh động đẹp mắt thực sự làm sống động các trang web của bạn. Chúng tôi sẽ sử dụng thư viện hoạt ảnh gsap mạnh mẽ để tạo hoạt ảnh cho ứng dụng Vue 3 của chúng tôi bằng JavaScript. Cuối cùng, bạn sẽ biết cách thiết lập một ứng dụng web hiện đại và tạo các hoạt ảnh mượt mà để đưa các trang web của bạn lên một tầm cao mới.

Giới thiệu

Tôi luôn thấy rằng việc học tốt nhất xảy ra khi xây dựng một thứ gì đó thực tế - vì vậy đó là những gì chúng tôi sẽ làm trong hướng dẫn này.

Chúng tôi sẽ sử dụng một số công cụ hiện đại như Vite để xây dựng dự án của chúng tôi, Vue 3 làm khung JavaScript của chúng tôi, TailwindCSS để tạo kiểu và sau đó, tất nhiên, Gsap cho các hoạt ảnh. Trọng tâm của chúng tôi sẽ là học cách tạo các hoạt ảnh, nhưng bạn cũng có thể nhận được một hoặc hai mẹo về Vue và Tailwind - vì vậy hãy xem đó là một phần thưởng.

Chúng tôi sẽ xây dựng một phần anh hùng mẫu cho một trang web dựa trên thiên nhiên, hoàn chỉnh với tiêu đề, văn bản mô tả, các nút gọi hành động và một số hình ảnh. Và sau đó, chúng tôi sẽ sử dụng Gsap để tạo hoạt ảnh cho mọi thứ theo trình tự để có thêm “hiệu ứng tuyệt vời”.

Đây là sản phẩm cuối cùng sẽ trông như thế nào:

Bằng cách sử dụng đồng thời Vite, Vue 3, Tailwind và Gsap, bạn sẽ được trang bị đầy đủ kiến thức để xây dựng các ứng dụng web hiện đại cung cấp trải nghiệm người dùng (UX) tuyệt vời. Bạn cũng sẽ nhận ra trải nghiệm tuyệt vời dành cho nhà phát triển (DX) mà các công cụ này cung cấp khi xây dựng ứng dụng của bạn.

Sức mạnh của hình ảnh động

Bạn có thể tự hỏi tại sao chúng ta cần hoạt ảnh và câu trả lời khá đơn giản:

Nó làm cho các trang web và ứng dụng của chúng tôi trở nên sống động hơn.

Hãy nghĩ về cách con người nhìn nhận mọi thứ trong thế giới thực. Không có gì chỉ “xuất hiện” từ hư không; nó luôn chuyển đổi một cách tự nhiên từ một nơi khác. Đôi mắt của chúng ta đã quen với việc các vật thể chuyển động ở các tốc độ khác nhau, vì vậy việc tạo hoạt ảnh cho mọi thứ trên web làm cho các trang của chúng ta trông tự nhiên hơn.

Ảnh động cũng là một cách để hướng sự tập trung của người dùng. Bằng cách tạo hoạt ảnh cho từng thứ một, như trong ví dụ mà chúng tôi sẽ xây dựng, chúng tôi có thể kiểm soát những gì người dùng chú ý đến - thay vì hiển thị tất cả mọi thứ cùng một lúc.

Cuối cùng, hình ảnh động là một cách tuyệt vời để làm hài lòng người dùng của chúng tôi với một cái gì đó bất ngờ. Nếu được sử dụng đúng cách, hình ảnh động sẽ tạo ra trải nghiệm người dùng tốt hơn khiến mọi người có nhiều khả năng nhớ trang web của chúng tôi hơn. Và tất nhiên, họ trông rất đẹp! 😎

Thiết lập ban đầu

Được rồi, nói vậy là đủ rồi. Hãy bắt tay vào xây dựng ứng dụng của chúng tôi.

Chúng tôi sẽ bắt đầu bằng cách thiết lập một dự án Vue 3 mẫu bằng Vite. Mở thiết bị đầu cuối yêu thích của bạn và chạy lệnh:

npm create [email protected]

Khi dự án đã được dựng lên, hãy làm theo hướng dẫn:

cd gsap-nature-site
npm install
npm run dev

<script setup></script>
<template>Hello world!</template>
<style></style>

Tiếp theo, chúng tôi sẽ thêm TailwindCSS. Vì đây không phải là hướng dẫn về Tailwind nên chúng tôi sẽ chỉ nhập nó bằng CDN chính thức. Mở tệp index.html trong thư mục gốc của dự án của bạn và thêm tập lệnh ngay trên thẻ tiêu đề:

<script src="https://cdn.tailwindcss.com"></script>

Bây giờ chúng ta cần cài đặt Gsap. Chạy phần sau trong thiết bị đầu cuối của bạn:

npm install gsap

import gsap from 'gsap'

Hoạt ảnh đầu tiên của bạn

Bây giờ chúng ta đã thiết lập xong, hãy bắt đầu với những kiến thức cơ bản về Gsap. Về cốt lõi, Gsap là một công cụ để điều chỉnh các thuộc tính trên một đối tượng giữa các trạng thái khác nhau. Đây có thể là bất kỳ đối tượng JavaScript nào nhưng thường sẽ là một phần tử HTML.

Hãy nghĩ về nó như thế này: nếu bạn có một tiêu đề ban đầu là ẩn ( opacity:0), chúng ta có thể sử dụng Gsap để chuyển nó sang một trạng thái khác, như hiển thị hoàn toàn ( opacity:1). Điều duy nhất Gsap cần biết là:

Đối tượng nào để tạo hoạt ảnh
Thuộc tính nào để tạo hoạt ảnh trên đối tượng đó

Hàm này có hai đối số. Đầu tiên là một phần tử HTML hoặc một bộ chọn CSS để tìm nạp một phần tử. Đối số thứ hai là một đối tượng có các thuộc tính mà chúng tôi muốn tạo hoạt ảnh. Ví dụ bên dưới:

gsap.to("#heading", {
    duration: 1.5,
    x: 100,
  });

import gsap from "gsap";
import { onMounted } from "vue";
onMounted(() => {
  gsap.to("#heading", {
    duration: 1.5,
    x: 100,
  });
}

Bạn sẽ nhận thấy rằng phần tử đang di chuyển từ vị trí ban đầu của nó trong DOM đến vị trí x: 100mà chúng tôi đã yêu cầu. Nhưng có lẽ chúng tôi thực sự muốn nó bắt đầu tắt màn hình ở bên trái và sau đó di chuyển vào vị trí "chính xác" của nó. Chúng ta có thể thực hiện điều này bằng cách sử dụng một hàm Gsap khác: the gsap.fromTo().

Hàm này cũng lấy một phần tử hoặc bộ chọn HTML làm đối số đầu tiên của nó, nhưng đối số thứ hai hiện được sử dụng để chỉ định nơi phần tử sẽ tạo hoạt ảnh . Đối số thứ ba sau đó là vị trí kết thúc của chúng ta - nơi phần tử sẽ hoạt hình .

Cập nhật ví dụ này:

gsap.fromTo(
    "#heading",
    {
      opacity: 0,
      x: "-100%",
    },
    {
      duration: 1.5,
      opacity: 1,
      x: 0,
    }
  );

Hãy thêm cùng một loại hiệu ứng vào văn bản mô tả của chúng tôi:

gsap.fromTo(
    "#description",
    {
      opacity: 0,
      x: "-100%",
    },
    {
      duration: 1.5,
      opacity: 1,
      x: 0,
      ease: "power3.inOut",
      delay: 0.5,
    }
  );

Chìa easekhóa cho Gsap biết cách chúng tôi muốn các thuộc tính được tweet. Gsap được tích hợp sẵn với một loạt các tốc độ khác nhau để lựa chọn và tất cả chúng đều tác động đến cách đối tượng của chúng ta hoạt hình.

Kiểm tra tài liệu chính thức để tìm hiểu thêm về tốc độ. Tài liệu cũng có một trình hiển thị dễ dàng tuyệt vời để cung cấp cho bạn ý tưởng về cách các giá trị khác nhau sẽ tác động đến hoạt ảnh của bạn. Nếu bạn không chỉ định mức độ dễ dàng, Gsap sẽ mặc định thành một chức năng máy tính tuyến tính, chức năng này thường không phải là những gì bạn muốn. Một lần nữa, hãy nghĩ về cách mọi thứ di chuyển trong cuộc sống thực: rất ít thứ di chuyển với tốc độ không đổi từ đầu đến cuối. Hầu hết mọi vật đều có thời gian tăng tốc nên nó bắt đầu chậm dần, sau đó chuyển động với tốc độ tối đa, rồi lại dừng lại chậm dần đều.

Dễ dàng có xu hướng có các trường hợp sử dụng khác nhau (như chúng ta sẽ thấy sau), nhưng khi nghi ngờ, tôi muốn sử dụng power3.inOut. Đó là một sự dễ dàng cho mục đích chung tuyệt vời mà hầu như lúc nào cũng trông đẹp mắt. Vui lòng thêm nó vào hoạt ảnh tiêu đề mà chúng tôi đã tạo trước đó.

Phát lại phiên nguồn mở

Gỡ lỗi một ứng dụng web trong quá trình sản xuất có thể khó khăn và tốn thời gian. OpenReplay là một mã nguồn mở thay thế cho FullStory, LogRocket và Hotjar. Nó cho phép bạn theo dõi và phát lại mọi thứ mà người dùng của bạn làm và cho biết ứng dụng của bạn hoạt động như thế nào đối với mọi vấn đề. Nó giống như việc mở trình kiểm tra của trình duyệt trong khi nhìn qua vai người dùng của bạn. OpenReplay là giải pháp thay thế mã nguồn mở duy nhất hiện có.

Chúc bạn gỡ lỗi vui vẻ, dành cho các nhóm giao diện người dùng hiện đại - Bắt đầu theo dõi ứng dụng web của bạn miễn phí .

Tạo hoạt ảnh cho các nút và mũi tên

Bây giờ văn bản của chúng ta đang hoạt hình, hãy làm việc trên các nút. Như bạn đã thấy trong ảnh gif đầu tiên, các nút lần lượt mờ dần từ dưới lên. Có hai cách chúng tôi có thể làm điều này:

Thêm hoạt ảnh vào mỗi nút (giống như chúng tôi đã làm cho văn bản) và tạo độ trễ lớn hơn cho nút thứ hai
Sử dụng một thuộc tính Gsap thú vị khác được gọi làstagger

Hãy chọn cả hai nút của chúng tôi với một lớp main-btn. Hãy chú ý đến cách chúng tôi chọn văn bản trước đó bằng cách sử dụng id. Nhưng vì chúng ta có thể sử dụng bất kỳ bộ chọn CSS nào, bộ chọn lớp bây giờ sẽ cấp cho Gsap quyền truy cập vào tất cả các phần tử có lớp đó (2 nút của chúng ta trong trường hợp này). Thêm mã sau:

gsap.fromTo(
    ".main-btn",
    {
      opacity: 0,
      y: "100%",
    },
    {
      duration: 1.5,
      opacity: 1,
      y: 0,
      delay: 1.3,
      ease: "power3.inOut",
      stagger: 0.1,
    }
  );

Với các nút ở vị trí, hãy xử lý mũi tên chỉ xuống. Chúng tôi sẽ áp dụng 2 hoạt ảnh khác nhau cho phần tử này. Cái đầu tiên sẽ tương tự với các nút, tạo hoạt ảnh cho mũi tên từ bên dưới:

gsap.fromTo(
    "#downArrow",
    {
      opacity: 0,
      y: "100%",
    },
    {
      duration: 1.5,
      opacity: 1,
      y: 0,
      delay: 2,
      ease: "power3.inOut",
    }
  );

Cập nhật đối tượng hoạt ảnh “thành” ở trên để bao gồm chức năng onComplete như sau:

{
      duration: 1.5,
      opacity: 1,
      y: 0,
      delay: 2,
      ease: "power3.inOut",
      onComplete: () => {
        gsap.to("#downArrow", {
          y: 50,
          duration: 2,
          ease: "sine.easeInOut",
          repeat: -1,
          yoyo: true,
        });
      },
    }

repeat: -1. This instructs Gsap to restart the animation on completion and to keep doing that forever. You could also pass a positive number to have the animation run that amount of times.
yoyo: true. This makes the animation run in reverse when repeating, so it goes back and forth naturally instead of jumping back to its initial position when restarting. Try to remove this and see what happens.

Now we’ve successfully added the first animation to fade in our downwards pointing arrow, and when that finishes, start another animation. This second animation moves the arrow up and down, repeating for infinity, and using the yoyo effect to run in reverse when going back.

Rotating images

Được rồi, hãy đến với phần cuối cùng của câu đố: xoay các hình ảnh của chúng ta vào đúng vị trí của chúng. Tôi đã cung cấp cho hình ảnh bên trái một id của imageLeftvà hình ảnh bên phải imageRight. Thực hiện theo quy trình tương tự như trước, thêm mã sau:

gsap.fromTo(
    "#imageLeft",
    {
      opacity: 0,
      y: 100,
      rotation: 10,
    },
    {
      duration: 1.5,
      opacity: 1,
      y: 0,
      rotation: -3,
      ease: "power3.inOut",
      delay: 2.5,
    }
  );

Chúng tôi sẽ làm một cái gì đó rất giống với hình ảnh bên phải:

gsap.fromTo(
    "#imageRight",
    {
      transformOrigin: "bottom right",
      rotation: 20,
      opacity: 0,
      y: -100,
    },
    {
      duration: 1.5,
      opacity: 1,
      y: 0,
      rotation: 3,
      ease: "power3.inOut",
      delay: 3,
    }
  );

Sự kết luận

Và đó là nó! Giờ đây, bạn đã có một phần anh hùng trông rất thú vị, làm sinh động một cách tự nhiên tất cả các yếu tố của nó để cảm thấy sống động hơn và thu hút người dùng tốt hơn 🔥