Cách thêm hoạt ảnh vào ứng dụng React của bạn với Framer Motion
Hoạt hình là một phần quan trọng của hầu hết mọi ứng dụng web hiện đại. Nó cũng là một trong những phần khó khăn nhất để làm cho đúng.
Framer Motion là một thư viện được xây dựng cho React giúp dễ dàng tạo hoạt ảnh cho các thành phần.
Mục Lục
Cách hoạt động của Framer Motion
Framer Motion sử dụng thành phần chuyển động cho hoạt ảnh. Mỗi phần tử HTML/SVG có một thành phần chuyển động tương đương có các chỗ dựa cho cử chỉ và hoạt ảnh. Ví dụ: một div HTML thông thường trông như thế này:
<div> </div>
Trong khi Framer Motion tương đương trông như thế này:
<motion.div> </motion.div>
Các thành phần chuyển động hỗ trợ một sinh động prop kích hoạt hoạt ảnh khi giá trị của nó thay đổi. Đối với hình ảnh động phức tạp, hãy sử dụng sử dụngAnimate hook với một ref có phạm vi.
Hoạt ảnh trong Framer Motion
Trước khi sử dụng Framer Motion trong dự án của mình, bạn cần cài đặt thời gian chạy Node.js và trình quản lý gói Yarn trên máy tính của mình, đồng thời hiểu React là gì và cách sử dụng nó.
Bạn có thể xem và tải xuống mã nguồn của dự án này từ Kho lưu trữ GitHub của nó. Sử dụng tập tin khởi động nhánh làm mẫu khởi đầu để làm theo hướng dẫn này hoặc tập tin cuối cùng nhánh cho bản demo hoàn chỉnh. Bạn cũng có thể xem dự án đang hoạt động thông qua bản demo trực tiếp này.
Mở thiết bị đầu cuối của bạn và chạy:
git clone git@github.com:smartreviewazcode/framer-motion-app.git
cd framer-motion-app
yarn
yarn dev
Khi nào bạn mở máy chủ cục bộ:5173 trong trình duyệt của bạn, bạn sẽ thấy điều này:
Giờ đây, bạn có thể tạo hoạt ảnh đơn giản đầu tiên của mình, một nút phát triển khi di chuột và thu nhỏ khi con trỏ rời đi.
Mở src/App.jsx tệp trong trình chỉnh sửa mã. Tệp này chứa một thành phần chức năng trả về một đoạn React. Nhập khẩu Cái nút thành phần, sau đó kết xuất nó, chuyển vào một chữ chỗ dựa:
<section>
<h4>Animated Button</h4>
<div>Move your mouse over the button to see the effect</div>
<Button text="Hover Me"/>
</section>
Tiếp theo, chỉnh sửa Nút.jsx tập tin và nhập khẩu cử động tiện ích từ chuyển động khung:
import { motion } from "framer-motion"
Bây giờ, thay thế bình thường cái nút phần tử với cử động.[element] thành phần. Trong trường hợp này, hãy sử dụng chuyển động.button thành phần.
Sau đó thêm một trong khiHover hỗ trợ cử chỉ và chuyển một đối tượng chứa các giá trị mà Framer Motion sẽ tạo hiệu ứng khi người dùng di chuột qua nút.
<motion.button whileHover={{ scale: 1.1 }}>{text}
</motion.button>
Giờ đây, nút sẽ hoạt ảnh khi bạn di chuyển con trỏ chuột qua hoặc ra khỏi nút:
Bạn có thể thắc mắc tại sao bản demo này không sử dụng CSS Animations để thay thế. Framer Motion có lợi thế hơn CSS vì nó tích hợp với trạng thái React và thường dẫn đến mã sạch hơn.
Tiếp theo, hãy thử điều gì đó phức tạp hơn: tạo hoạt ảnh cho một phương thức. TRONG Phông nền.jsxnhập tiện ích chuyển động và tạo một thành phần chức năng với trong một cái nhấp chuột Và những đứa trẻ đạo cụ. Trả lại một chuyển động.div thành phần với lớp “phông nền” và trong một cái nhấp chuột người nghe trong JSX.
export default function Backdrop() {
return (<>
<motion.div>
</motion.div>
</>)
}
Sau đó thêm ba đạo cụ cụ thể là: ban đầu, sinh động, Và lối ra. Các đạo cụ này đại diện cho trạng thái ban đầu của thành phần, trạng thái mà thành phần sẽ hoạt ảnh và trạng thái của thành phần đó sau khi hoạt ảnh, tương ứng.
Thêm vào trong một cái nhấp chuột Và những đứa trẻ đạo cụ cho chuyển động.div và đặt thời lượng chuyển tiếp thành 0,34 giây:
export default function Backdrop ({onClick, children}){
return (<>
<motion.div
onClick={onClick}
className="backdrop"
initial={{ opacity: 0, backdropFilter:"blur(0px)" }}
animate={{ opacity: 1, backdropFilter:"blur(3.4px)" }}
exit={{ opacity: 0, backdropFilter:"blur(0px)"}}
transition={{
duration: 0.34,
}}
>
{children}
</motion.div>
</>)
}
Các phông nền thành phần là một trình bao bọc cho phương thức thành phần. Nhấp vào phông nền sẽ loại bỏ phương thức. TRONG Phương thức.jsxnhập khẩu cử động và thành phần Phông nền. Thành phần chức năng mặc định chấp nhận đạo cụ: closeModal Và chữ. Tạo một biến biến thể như một đối tượng.
const variants = {
initial: {
y: "-200%",
opacity: 1,
},
visible: {
y: "50%",
transition: {
duration: 0.1,
type: "spring",
damping: 32,
stiffness: 500
}
},
exit: {
y: "200%",
}
}
Trả về thành phần motion.div được bao bọc bởi thành phần Phông nền với chỗ dựa “biến thể” trỏ đến đối tượng biến thể. Các biến thể là một tập hợp các trạng thái hoạt hình được xác định trước mà thành phần có thể ở trong đó.
<Backdrop onClick={closeModal}>
<motion.div
onClick={(e) => e.stopPropagation()}
className="modal"
variants={variants}
initial='initial'
animate='visible'
exit='exit'
>
{text}
</motion.div>
</Backdrop>
Tiếp theo, bạn cần thêm chức năng hiển thị modal khi người dùng nhấp vào nút. Mở Ứng dụng.jsx tập tin và nhập khẩu sử dụngState Móc phản ứng và phương thức thành phần.
import { useState } from "react";
import Modal from "./components/Modal";
Sau đó tạo một phương thứcMở trạng thái với giá trị mặc định được đặt thành SAI.
const [modalOpen, setModalOpen] = useState(false);
Tiếp theo, xác định một chức năng closeModal mà thiết lập phương thứcMở để sai.
function closeModal() {
setModalOpen(false)
}
Ở đầu đoạn React, kết xuất có điều kiện một phương thức thành phần và vượt qua thích hợp chữ prop với closeModal prop.
{modalOpen && <Modal text="This is a modal animated with Framer Motion"}
Sau đó, trong lần thứ hai phần phần tử, kết xuất một cái nút phần tử có trình xử lý sự kiện onClick đặt modalOpen thành false.
<button onClick={() => setModalOpen(true)}>Show Modal</button>
Bạn có thể nhận thấy rằng React ngắt kết nối thành phần Phương thức khỏi DOM mà không có hoạt ảnh thoát. Để khắc phục điều đó, bạn cần một AnimatePresence thành phần. Nhập AnimatePresence từ chuyển động khung.
import {AnimatePresence} from 'framer-motion';
Bây giờ, bọc thành phần Modal trong thành phần AnimatePresence và đặt ban đầu chống lại sai và cách thức đợi”.
<AnimatePresence initial={false} mode="wait">
{modalOpen && <Modal text="This is a modal animated with Framer Motion" closeModal={closeModal} />}
</AnimatePresence>
Thành phần AnimatePresence cho phép hoạt ảnh thoát hoàn thành trước khi React ngắt kết nối nó khỏi DOM.
Framer Motion có thể tạo hiệu ứng động cho các thành phần khi cuộn bằng cách sử dụng trong khiInView chống đỡ. Mở ScrollElement.jsxvà nhập cử động tính thiết thực. Thay đổi div ĐẾN chuyển động.div với lớp “phần tử cuộn”.
<motion.div
initial={{ opacity: 0, scale: 0, rotate: 14 }}
whileInView={{ opacity: 1, scale: 1, rotate: 0 }}
transition={{ duration: .8 }}
viewport={{ once: true }}
className='scroll-element'
>
Scroll Element
</motion.div>
Các khung nhìn prop trỏ đến một đối tượng đặt một lần ĐẾN ĐÚNG VẬY. Tiếp theo, trong Ứng dụng.jsx tệp, nhập tệp Phần tử cuộn thành phần và xác định biến scrollElementCount chứa giá trị số nguyên.
let scrollElementCount=14;
Cuối cùng phần phần tử, tạo một mảng có độ dài cụ thể được xác định bởi cuộnElementCount ánh xạ qua từng phần tử của mảng và tạo một thành phần có khóa duy nhất dựa trên chỉ mục Tôi.
{[...Array(scrollElementCount)].map((x, i) => <ScrollElement key={i} />)}
Bây giờ, quay lại trình duyệt, các phần tử sẽ hoạt ảnh khi bạn cuộn chúng vào chế độ xem.
Các lựa chọn thay thế cho Framer Motion
Framer Motion không phải là thư viện hoạt hình duy nhất trên thị trường. Nếu bạn không thích cách Framer Motion thực hiện mọi việc, bạn có thể thử các thư viện khác như React Spring.
Bạn cũng có thể sử dụng hoạt hình CSS, mà tất cả các trình duyệt hiện đại đều hỗ trợ nguyên bản, nhưng các kỹ thuật liên quan có thể khó tìm hiểu và thiết lập.
Cải thiện trải nghiệm người dùng với hoạt ảnh
Mọi người dùng đều mong đợi trải nghiệm mượt mà khi sử dụng ứng dụng web. Một trang web hoặc ứng dụng không có hoạt ảnh có cảm giác tĩnh và không phản hồi. Hoạt ảnh cải thiện trải nghiệm người dùng vì bạn có thể sử dụng chúng để truyền đạt phản hồi cho người dùng khi họ thực hiện một hành động nhất định.