Matt Perry từ Framer và tôi xem qua thư viện hoạt hình React Framer Motion.
Trước tiên, chúng ta hãy xem API đơn giản như thế nào. Bạn kiểm soát mọi thứ rất rõ ràng thông qua các đạo cụ trên các phần tử trong JSX của bạn. Điều khiển hoạt ảnh ở lớp này rất trực quan và được kết nối với giao diện người dùng và trạng thái một cách có ý nghĩa.
Mỗi ví dụ mà chúng tôi xem xét đều giống thế giới thực hơn và bao gồm nhiều tính năng hơn về khả năng của Framer Motion. Các nhà phát triển React sẽ thích tất cả cú pháp của nó, và tất cả những người khác sẽ thích kết quả cực kỳ hiệu quả và mượt mà.
Chúng tôi kết thúc việc xem xét chính Framer, sử dụng thư viện chính xác này trong nội bộ để thực hiện tất cả các hoạt động mà Framer làm. Bị hấp dẫn bởi Framer? Tải xuống Framer X.
Demo 1: Cú pháp cơ bản
Demo 2: Các biến thể
Demo 3: AnimatePresence and layoutTransition
Phần thưởng: hãy xem chức năng “cuộn để loại bỏ” trên cửa sổ bật lên hình ảnh.