למד כיצד להוסיף אנימציות פשוטות לאפליקציית React שלך עם מינימום מאמץ קידוד.

אנימציה היא חלק מכריע כמעט בכל יישום אינטרנט מודרני. זה גם אחד החלקים הקשים ביותר לביצוע.

Framer Motion היא ספרייה שנבנתה עבור React שמקלה על הנפשת רכיבים.

כיצד פועלת Framer Motion

Framer Motion משתמש ברכיב התנועה להנפשות. לכל רכיב HTML/SVG יש רכיב תנועה שווה ערך הכולל אביזרים למחוות והנפשות. לדוגמה, div HTML רגיל נראה כך:

<div>div>

בעוד המקבילה של Framer Motion נראית כך:

<motion.div>motion.div>

רכיבי תנועה תומכים ב לְהַנפִּישׁ prop שמפעיל אנימציות כאשר הערכים שלו משתנים. עבור אנימציות מורכבות, השתמש ב- השתמש באנימציה וו עם ר' טווח.

אנימציה ב-Framer Motion

לפני השימוש ב- Framer Motion בפרויקט שלך, אתה צריך את ה זמן ריצה של Node.js ומנהל החבילות של Yarn המותקן במחשב שלך ו להבין מה זה React וכיצד להשתמש בו.

אתה יכול להציג ולהוריד את קוד המקור של הפרויקט הזה ממנו מאגר GitHub. להשתמש ב קבצי התחלה סניף כתבנית התחלה לעקוב יחד עם הדרכה זו, או ה קבצים סופיים סניף להדגמה המלאה. אתה יכול גם לראות את הפרויקט בפעולה באמצעות זה דמו ישיר.

instagram viewer

פתח את המסוף שלך והרץ:

git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
חוּט
מפתח חוט

כשאתה פותח מארח מקומי: 5173 בדפדפן שלך תראה את זה:

כעת תוכל ליצור את האנימציה הפשוטה הראשונה שלך, כפתור שגדל עם ריחוף ומתכווץ כאשר הסמן עוזב.

פתח את ה src/App.jsx קובץ בעורך קוד. קובץ זה מכיל רכיב פונקציונלי שמחזיר קטע React. ייבא את לַחְצָן רכיב, ואז עבד אותו, עובר ב-a טֶקסט לִתְמוֹך:


לחצן מונפש</h4>
העבר את העכבר מעל הכפתור כדי לראות את האפקט</div>

לאחר מכן, ערוך את ה Button.jsx קובץ וייבא את תְנוּעָה שירות מ framer-motion:

יְבוּא { תנועה } מ"פרימר-תנועה"

עכשיו, החלף את הרגיל לַחְצָן אלמנט עם ה תנועה.[אלמנט] רְכִיב. במקרה זה, השתמש ב- תנועה.לחצן רְכִיב.

לאחר מכן הוסף א תוך כדי ריחוף דחף מחוות והעברת אובייקט של ערכים ש-Framer Motion צריך להנפיש אליו כאשר משתמש מרחף מעל הכפתור.

סוּלָם: 1.1 }}>
{טֶקסט}
</motion.button>

הכפתור יופעל כעת כאשר תעביר את מצביע העכבר מעליו או החוצה ממנו:

אתה אולי תוהה מדוע ההדגמה הזו לא משתמשת אנימציות CSS במקום זאת. ל-Framer Motion יתרונות על פני CSS מכיוון שהוא משתלב עם מצב React ובדרך כלל מביא לקוד נקי יותר.

לאחר מכן, נסה משהו מורכב יותר: הנפשת מודאלית. ב Backdrop.jsx, ייבא את כלי התנועה וצור רכיב פונקציונלי עם בלחיצה ו יְלָדִים אביזרים. החזר א motion.div רכיב עם מחלקה "רקע" ו בלחיצה מאזין ב-JSX.

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהרקע() {
לַחֲזוֹר (<>

 </motion.div>
 </>)
}

לאחר מכן הוסף שלושה אביזרים כלומר: התחלתי, לְהַנפִּישׁ, ו יְצִיאָה. אביזרים אלה מייצגים את המצב המקורי של הרכיב, את המצב שאליו הרכיב צריך להנפיש, ואת המצב שבו הרכיב צריך להיות לאחר ההנפשה, בהתאמה.

לְהוֹסִיף בלחיצה ו יְלָדִים אביזרים ל motion.div והגדר את משך המעבר ל-0.34 שניות:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהרקע ({onClick, ילדים}){
לַחֲזוֹר (<>
 onClick={onClick}
 className="רקע"
 initial={{ אֲטִימוּת: 0, מסנן רקע:"טשטוש (0px)" }}
 animate={{ אֲטִימוּת: 1, מסנן רקע:"טשטוש (3.4 פיקסלים)" }}
 יציאה={{ אֲטִימוּת: 0, מסנן רקע:"טשטוש (0px)"}}
 transition={{
 מֶשֶׁך: 0.34,
 }}
 >
 {יְלָדִים}
 </motion.div>
 </>)
}

ה רקע רכיב הוא עטיפה עבור מוֹדָלִי רְכִיב. לחיצה על הרקע מבטלת את המודאל. ב Modal.jsx, ייבוא תְנוּעָה ורכיב הרקע. ברירת המחדל של הרכיב הפונקציונלי מקבל אביזרים: closeModal ו טֶקסט. צור משתנה וריאנט כאובייקט.

const וריאציות = {
 התחלתי: {
 y: "-200%",
 אֲטִימוּת: 1,
 },
 גלוי: {
 y: "50%",
 מעבר: {
 מֶשֶׁך: 0.1,
 סוּג: "אביב",
 שיכוך: 32,
 נוּקְשׁוּת: 500
 }
 },
 יציאה: {
 y: "200%",
 }
 }

החזר רכיב motion.div עטוף על ידי רכיב רקע עם אבזר "וריאנטים" המצביע על אובייקט הווריאציות. גרסאות הן קבוצה של מצבי אנימציה מוגדרים מראש שהרכיב יכול להיות בהם.


 onClick={(e) => e.stopPropagation()}
 className="מוֹדָלִי"
 variants={variants}
 ראשוני='התחלתי'
 הנפש ='גלוי'
 יציאה='יְצִיאָה'
 >
 {טֶקסט}
 </motion.div>
</Backdrop>

לאחר מכן, עליך להוסיף את הפונקציונליות כדי להציג את המודאל כאשר משתמש לוחץ על הכפתור. פתח את ה App.jsx קובץ וייבא את useState הוק להגיב וה מוֹדָלִי רְכִיב.

יְבוּא { useState } מ"לְהָגִיב";
יְבוּא מוֹדָלִי מ"./components/Modal";

לאחר מכן צור א modalOpen מצב עם ערך ברירת המחדל מוגדר ל שֶׁקֶר.

const [modalOpen, setModalOpen] = useState(שֶׁקֶר);

לאחר מכן, הגדר פונקציה closeModal שקובע את modalOpen לשווא.

פוּנקצִיָהcloseModal() {
 setModalOpen(שֶׁקֶר)
}

בחלק העליון של קטע React, עיבוד מותנה א מוֹדָלִי רכיב ולהעביר את המתאים טֶקסט משענת עם משענת closeModal.

{modalOpen && <מוֹדָלִיטֶקסט="זהו אנימציה מודאלית עם Framer Motion"}

ואז, בשני סָעִיף אלמנט, render a לַחְצָן אלמנט עם מטפל באירועים onClick שמגדיר את modalOpen ל-false.

ייתכן שתבחין ש-React מבטל את הטעינה של רכיב Modal מה-DOM ללא אנימציית יציאה. כדי לתקן את זה, אתה צריך AnimatePresence רְכִיב. יבא את AnimatePresence מ framer-motion.

יְבוּא {AnimatePresence} מ'מסגרת-תנועה';

כעת, עטפו את הרכיב Modal ברכיב AnimatePresence והגדרו את התחלתי הצמד לשווא וה מצב לחכות".

שֶׁקֶרמצב }="לַחֲכוֹת">
 {modalOpen && <מוֹדָלִיטֶקסט="זהו אנימציה מודאלית עם Framer Motion"closeModal={closeModal} />}
</AnimatePresence>

רכיב AnimatePresence מאפשר להשלים אנימציות יציאה לפני ש-React מבטל אותה מה-DOM.

Framer Motion יכול להנפיש רכיבים בגלילה באמצעות whileInView לִתְמוֹך. פתח את ה ScrollElement.jsx, ולייבא את תְנוּעָה תוֹעֶלֶת. שינוי div ל motion.div עם המחלקה "גלילה-אלמנט".

 initial={{ אֲטִימוּת: 0, סוּלָם: 0, להתחלף: 14 }}
 whileInView={{ אֲטִימוּת: 1, סוּלָם: 1, להתחלף: 0 }}
 transition={{ מֶשֶׁך: .8 }}
 viewport={{ פַּעַם: נָכוֹן }}
 className='אלמנט גלילה'
>
 רכיב גלילה
</motion.div>

ה נקודת מבט prop מצביע על אובייקט שמתקבע פַּעַם ל נָכוֹן. לאחר מכן, ב- App.jsx קובץ, ייבא את ScrollElement רכיב ולהגדיר משתנה scrollElementCount שמכיל ערך שלם.

לתת scrollElementCount=14;

באחרון סָעִיף אלמנט, צור מערך עם אורך ספציפי המוגדר על ידי scrollElementCount שממפה כל אלמנט של המערך ומייצר רכיב עם מפתח ייחודי המבוסס על האינדקס אני.

{[...Array (scrollElementCount)].map((x, אני) =><ScrollElementמַפְתֵחַ={אני} />)}

כעת, כשחוזרים לדפדפן, אלמנטים צריכים להנפש כאשר אתה גולל אותם לתצוגה.

חלופות ל-Framer Motion

Framer Motion היא לא ספריית האנימציה היחידה בשוק. אם אתה לא אוהב את הדרך שבה Framer Motion עושה דברים, אתה יכול לנסות ספריות אחרות כמו תגיב אביב.

אתה יכול גם להשתמש בהנפשות CSS, שכל הדפדפנים המודרניים תומכים בהן באופן מקורי, אבל הטכניקות הכרוכות בהן עשויות להיות מסובכות ללמידה ולהגדרה.

שיפור חווית משתמש עם אנימציות

כל משתמש מצפה לחוויה חלקה וחמאתית בעת שימוש באפליקציית אינטרנט. אתר או אפליקציה ללא אנימציות מרגישים סטטיים ולא מגיבים. אנימציות משפרות את חווית המשתמש מכיוון שניתן להשתמש בהן כדי להעביר משוב למשתמש כאשר הוא מבצע פעולה מסוימת.