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

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

I would ask @0xca0a
— Dan Abramov (@dan_abramov) June 13, 2018

Holy smokes. I don't think animation can get any easier in React now with React Spring. Wrapping Reach UI (https://t.co/F5FbMFDkcW) in your own brand and feel is going to be so easy.

Strong work @0xca0a

Gist of code for the effect: https://t.co/PedbJvXQDG pic.twitter.com/8D8ESWBQgQ
— Ryan Florence (@ryanflorence) August 27, 2018

react-spring is insane https://t.co/ZM4BZwxUyK
I haven't done a lot of animations but it's the first React library I come across that does it the correct way: not using setState to change styles but bypass React.
— Alexander Prinzhorn (@Prinzhorn) June 15, 2018

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

ראשית ניצור פרוייקט חדש של ריאקט באמצעות 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 לאחר ששתי הקומפוננטות הראשונות כבר נכנסו למסך.

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