Cách tạo hoạt ảnh đầu vào và đầu ra cho một thành phần phản ứng bằng cách sử dụng Framer Motion

Tạo hoạt ảnh cho một thành phần React khi nó đi vào hoặc rời khỏi màn hình có thể là một thách thức. Điều này là do, khi bạn ẩn một thành phần, React sẽ xóa nó khỏi DOM, điều này khiến nó không khả dụng cho hoạt ảnh. Khi bạn hiển thị lại thành phần, React sẽ thêm lại thành phần đó vào DOM, điều này có thể dẫn đến sự xuất hiện đột ngột mà không có hoạt ảnh.

Bạn có thể giải quyết vấn đề này bằng thư viện hoạt hình như Framer Motion.

Chuyển động Framer là gì?

Framer Motion là một thư viện hoạt hình sẵn sàng sản xuất cho React. Nó cung cấp một loạt các thành phần, hook, khung hình chính và các chức năng nới lỏng tùy chỉnh để tạo và kiểm soát hoạt ảnh.

Một ưu điểm của Framer Motion là nó giúp bạn dễ dàng tạo hoạt ảnh mượt mà và trôi chảy mà không cần viết nhiều mã JavaScript hoặc tìm ra các phép tính cho mỗi lần chuyển đổi.

Nó cũng có một hệ thống sự kiện mà bạn có thể sử dụng để kích hoạt hoạt ảnh dựa trên đầu vào của người dùng, chẳng hạn như nhấp vào nút và cử chỉ, tạo giao diện tương tác và động có cảm giác phản hồi nhanh.

Để trình bày cách sử dụng Framer Motion trong React, bạn sẽ tạo hoạt ảnh cho một thành phần đi vào và rời khỏi màn hình khi bạn nhấp vào một nút.

Tạo một dự án phản ứng

Để tạo dự án React, bạn cần cài đặt Node.js và npm (Trình quản lý gói nút) trên máy của mình nếu chưa cài đặt.

Khi bạn đã cài đặt các phụ thuộc này, bạn có thể tạo dự án React mới bằng Vite bằng cách chạy lệnh yarn vite trong thiết bị đầu cuối của mình.

 yarn vite
 

Lệnh này sẽ tạo một thư mục mới với tất cả các tệp và phụ thuộc cần thiết được cài đặt sẵn. Điều hướng đến thư mục và khởi động máy chủ phát triển bằng lệnh bắt đầu sợi.

 yarn start 

Cài đặt Framer Motion trong React

Cài đặt Framer Motion bằng cách chạy lệnh này:

 npm install framer-motion
 

Lệnh này sẽ thêm Framer Motion làm phụ thuộc vào dự án của bạn.

Hoạt hình một thành phần

Để tạo hiệu ứng động cho một thành phần khi nó đi vào và rời khỏi màn hình trong React bằng Framer Motion, bạn cần bọc nó trong thành phần chuyển động.

Thành phần chuyển động cung cấp một tập hợp các thuộc tính để tạo hoạt ảnh cho lối vào và lối ra của thành phần. Bạn có thể sử dụng các đạo cụ khởi tạo, hoạt ảnh và thoát để kiểm soát khả năng hiển thị và vị trí của nó.

Để xem nó hoạt động, hãy thêm đoạn mã sau vào đầu App.jsx để nhập thành phần chuyển động từ framer-motion.

 import { motion } from "framer-motion";
 

Tiếp theo, tạo thành phần bạn muốn tạo hiệu ứng động bằng cách bọc nó bằng thành phần chuyển động. Ví dụ này sử dụng phần tử div nhưng bạn có thể sử dụng bất kỳ phần tử nào khác mà bạn muốn, chẳng hạn như nút, li và p cùng với các phần tử khác.

 import { motion, AnimatePresence } from "framer-motion"
function App() {
  return (
    <>
      <AnimatePresence>
        <motion.div
          initial={{ x: -100, opacity: 0 }}
          animate={{ x: 0, opacity: 1 }}
          exit={{ x: -100, opacity: 0 }}
        >
          <p>Sent!</p>
        </motion.div>
      <AnimatePresence>
    </>
  )
}
 

Thành phần chuyển động cho phép bạn tạo hiệu ứng động cho thành phần div chứa văn bản “Đã gửi!”.

Các ban đầu, sinh độngVà lối ra các thuộc tính của thành phần chuyển động xác định hoạt ảnh vào và ra của thành phần. Khi thành phần được hiển thị ban đầu, nó sẽ bắt đầu với vị trí x là -100 (ngoài màn hình ở bên trái) và độ mờ là 0 và trở nên vô hình.

Thuộc tính animate xác định cách thành phần sẽ hoạt ảnh khi nó vào màn hình, trong trường hợp này di chuyển từ vị trí x là -100 sang vị trí x là 0 (trượt vào từ bên trái) và dần dần chuyển sang độ mờ là 1 và trở nên hoàn toàn dễ thấy.

Cuối cùng, thuộc tính exit xác định cách thành phần sẽ hoạt ảnh khi bạn xóa nó khỏi màn hình. Trong trường hợp này, thành phần sẽ trượt khỏi màn hình sang bên trái với vị trí x là -100 và giảm dần về độ mờ là 0.

Bạn cũng cần bọc thành phần chuyển động bằng thành phần AnimatePresence từ framer-motion thành các thành phần hoạt ảnh khi bạn xóa chúng khỏi cây React DOM.

Bây giờ bạn đã xác định hoạt ảnh vào và ra, bạn có thể thêm một nút để kích hoạt hoạt ảnh. Đây là thành phần được sửa đổi với nút:

 import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";
function App() {
  const [isVisible, setIsVisible] = useState(true);
  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };
  return (
    <>
      <AnimatePresence>
        {isVisible && ( <motion.div
          initial={{ x: -100, opacity: 0 }}
          animate={{ x: 0, opacity: 1 }}
          exit={{ x: -100, opacity: 0 }}
        >
          <p>Sent!</p>
        </motion.div>)}
      </AnimatePresence>
      <button onClick={toggleVisibility}>
        Notify
      </button>
    </>
  )
} 

Mã được cập nhật này thêm một biến trạng thái có tên là isVisible bằng cách sử dụng hook useState. Biến này theo dõi xem thành phần có hiển thị hay không. Hàm toggleVisibility chuyển đổi giá trị của isVisible giữa đúng và sai khi bạn nhấp vào nút.

Bạn hiện đang kết xuất thành phần theo điều kiện tùy thuộc vào giá trị của isVisible. Nếu isVisible là true, thành phần chuyển động sẽ hiển thị với hoạt ảnh đầu vào.

Cuối cùng, thêm trình xử lý sự kiện onClick vào nút gọi chức năng toggleVisibility, cập nhật trạng thái của isVisible và kích hoạt hoạt ảnh vào hoặc ra của thành phần chuyển động.

Thêm chức năng nới lỏng

Chức năng nới lỏng kiểm soát tốc độ thay đổi của hình ảnh động theo thời gian. Nó xác định thời gian của hoạt ảnh bằng cách chỉ định cách hoạt ảnh sẽ tăng tốc hoặc giảm tốc độ khi nó tiến triển. Nếu không có chức năng nới lỏng, hoạt ảnh có thể hiển thị quá nhanh.

Framer Motion cung cấp một số chức năng nới lỏng để lựa chọn, bao gồm cả easyInOut. Nhập nó ở đầu App.jsx từ framer-motion để sử dụng nó.

 import { motion, easeInOut } from "framer-motion";
 

Sau đó thêm nó vào đối tượng chuyển tiếp trong thành phần chuyển động:

 <motion.div
    initial={{ x: -100, opacity: 0 }}
    animate={{ x: 0, opacity: 1, transition: { duration: 0.5, ease: easeInOut } }}
    exit={{ x: -100, opacity: 0, transition: { duration: 0.5, ease: easeInOut } }}
>
    <p>Sent!</p>
</motion.div>
 

Thuộc tính thời lượng chỉ định khoảng thời gian hoạt hình sẽ chạy.

Sử dụng CSS đơn giản cho hoạt ảnh đơn giản

Còn rất nhiều điều bạn có thể làm với Framer Motion bao gồm cả hoạt hình 3D. Tuy nhiên, không phải lúc nào bạn cũng cần thư viện để tạo ảnh động. Đối với các hoạt ảnh đơn giản như chuyển tiếp di chuột, bạn luôn có thể sử dụng CSS đơn giản.