8.7 אנימציות תרגול
תרגול - אנימציות¶
תרגיל 1¶
צרו קומפוננטת כפתור מונפש:
- אנימציית כניסה: fade in + scale מ-0.8 ל-1
- whileHover: הגדלה ל-1.05 + שינוי צל
- whileTap: הקטנה ל-0.95
- צרו 3 גרסאות: primary (כחול), success (ירוק), danger (אדום)
- כל גרסה עם צבע hover שונה
- השתמשו ב-variants
תרגיל 2¶
צרו רשימת כרטיסיות עם אנימציית stagger:
- 6 כרטיסיות שנכנסות ברצף (staggerChildren: 0.1)
- כל כרטיסייה: fade in + slide up (y: 30 -> 0)
- hover: הרמה למעלה (-5px) + הגדלת צל
- לחיצה על כרטיסייה מרחיבה אותה (layout animation)
- הכרטיסייה המורחבת מציגה תוכן נוסף
- לחיצה שנייה מכווצת חזרה
תרגיל 3¶
צרו קומפוננטת FAQ (שאלות נפוצות) עם AnimatePresence:
- רשימה של 5 שאלות
- לחיצה על שאלה פותחת/סוגרת את התשובה עם אנימציה
- אנימציית פתיחה: הגדלת גובה מ-0 + fade in
- אנימציית סגירה: הקטנת גובה ל-0 + fade out
- סימן +/- שמסתובב ב-45 מעלות כשהשאלה פתוחה
- רק שאלה אחת פתוחה בכל רגע
תרגיל 4¶
צרו גלריית תמונות עם אנימציות:
- רשת של 9 תמונות (placeholders) ב-3x3
- לחיצה על תמונה מרחיבה אותה לכל הדף (layout animation)
- רקע כהה מונפש מופיע מאחורי התמונה המוגדלת (AnimatePresence)
- לחיצה על הרקע או על X סוגרת
- אנימציית כניסה: scale + opacity
- אנימציית יציאה: scale + opacity הפוכה
תרגיל 5¶
צרו אנימציית מעבר בין "דפים":
- 3 "דפים" עם ניווט (כפתורים)
- מעבר slide: דף יוצא שמאלה, דף נכנס מימין
- AnimatePresence mode="wait"
- כל דף מכיל תוכן שונה עם אנימציות stagger פנימיות
- הוסיפו progress bar מונפש בחלק העליון שמתמלא במעבר
תרגיל 6¶
צרו אפליקציית TODO מונפשת:
- הוספת פריט: slide in מימין + fade in
- הסרת פריט: slide out שמאלה + fade out + shrink
- סימון כ-complete: line-through עם אנימציה + שינוי צבע
- גרירה לשינוי סדר (drag="y")
- כפתור הוספה עם אנימציית pulse כשאין פריטים
- שימוש ב-layout animation לסידור מחדש
שאלות¶
- מה ההבדל בין type: "spring" ל-type: "tween"? מתי נעדיף כל אחד?
- מה עושה AnimatePresence ולמה צריך key על האלמנט בתוכו?
- מה ההבדל בין whileHover ל-animate? מתי נשתמש בכל אחד?
- מה layout prop עושה ואיך Framer Motion מצליח להנפיש שינויי layout?
- מה היתרון של variants על פני הגדרת animate ישירות?