אנימציות בריאקט

0
1290

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

יצירת פרוייקט חדש

ראשית ניצור פרוייקט חדש של ריאקט באמצעות create-react-app

לאחר מכן נתקין את הספריה React Spring

עכשיו אחרי שהתקנו את הכל אנחנו יכולים להתחיל.

בעקבות הצוות של ריאקט React Spring עברו לשימוש בהוקס וכעת כל ה API שלהם ממומש כך, אך עדיין יש תמיכה בגרסאות הקודמות.
כרגע יש לנו 5 הוקס ב- React Spring:

  • "useSpring" – נותן לנו את היכולת לבצע אנימציה לדאטה במעבר ממקום A למקום B
  • "useSprings" – נועד לעבודה עם רשימות ונותן לנו את היכולת לתת אנימציה לכל ילד
  • ״useTrail״ – מספר אלמנטים אשר אנו רוצים להנפיש שנמצאים ב -dataset אחד
  • ״useTransition" – עבור אנימציות ב- mount / unmount (רשימות שבהן פריטים מתווספים / מוסרים / מתעדכנים, שינוי ראוטינג, החלפות תמונה, שינויי opacity ועוד…)
  • ״useChain״ – כדי לשרשר מספר אנימציות

איזה אנימציות ניצור?

בפוסט זה נתמקד ב  ״useSpring״ ו- ״useTransition״ אלו הם ההוקס הפשוטים והנפוצים ביותר. ברב האנימציות שנצטרך בפרוייקטים שלנו נעשה שימוש בהוקס הנל.

בפרוייקט שלנו יהיו 4 קומפוננטות,
בקומפוננטה הראשונה יש לנו ארבעה תמונות שיתחלפו כל שתי שניות עם אפקט של fade. שימו לב שמעבר שנעשה כאן שימוש בהוקס של ריאקט. כדי ליצור מצב זה קודם כל נחזיק מערך עם url של ארבעת התמונות.
כעת בעזרת useState נחליט באיזה אינדקס אנחנו מתחילים ואיך נוכל לעדכן אותו.
כעת נעבור לחלק של האנימציה באמצעות useTransition בפרמטר הראשון נקבע על מי אנחנו עושים את האנימציה, בפרמטר השני נעביר key ייחודי ולאחר מכן נעביר את הפרופרטיס של איך נרצה שהאנימציה תתנהג ב from, enter ו- leave
React spring מבוסס על פיסיקה, זה אומר שאנחנו לא צריכים להתמודד באופן ידני עם משכי זמן העקומות(תוכלו לראות מה הדיפולט בדוקיומנטציה שלהם). זה מאוד נח מכיוון  שהם פתרו לנו את כל העיסוק עם המתמטיקה. עם זאת, אנחנו עדיין יכולים לשנות את ההתנהגות הדיפולטית בעזרת שינויים ב- config.

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

הקומפונטטה השנייה ״תחליק״ מלמעלה ותכנס עם אפקט של fade
לאחר שהקומפוננטה תגיעה למיקומה ירוץ סטופר של שנייה.
לצורך שתי האנימציות האלה נשתמש ב ״useSpring״
באנימציה של ההחלקה מלמעלה וה- fade נעביר את המצב ההתחלתי שנרצה בתוך האובייקט from ואת המצב אליו נרצה להגיע לאובייקט to
כדי להוסיף delay לאנימציה פשוט נעביר את זה כפרופרטי ונציין את מספר השניות שנרצה.
באנימציה של הסטופר נציין את המספר ההתחלתי שנרצה ואת המספר אליו נרצה להגיע.
חדי ההבחנה בטח שמו לב לתגית ״animated״ בתוך ה- return
זוהי תגית מתוך React Spring  לאחר ״animated״ נרשום את שם התגית אותה נרצה שתטען ב- DOM ונעביר ב style את הגדרות האנימציה.

הקומפוננטה השלישית והפשוטה ביותר בה נדגים fade in לאחר ששתי הקומפוננטות הראשונות כבר נכנסו למסך.

התוצאה הסופית של הפרוייקט שלנו תראה כך

דוגמאות נוספות

דוגמאות נוספות שנוכל ליצור באמצעות React Spring

סיכום

עכשיו יש לכם את הכלים להתחיל לעבוד עם React Spring ולנצל את מלוא כוחה של ספריה זו. בהצלחה 🙂

כדי שנוכל לשחק עם הקוד ולעשות שינויים מצורף Sandbox

אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.

LEAVE A REPLY

Please enter your comment!
Please enter your name here