היבט חשוב שכל מפתח פרונט צריך להכיר ולהשתמש בו הוא אנימציות. אנו משתמשים באנימציות כדי להראות מעברים חלקים בין שינויים ב-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.
— Ryan Florence (@ryanflorence) August 27, 2018
Strong work @0xca0a
Gist of code for the effect: https://t.co/PedbJvXQDG pic.twitter.com/8D8ESWBQgQ
react-spring is insane https://t.co/ZM4BZwxUyK
— Alexander Prinzhorn (@Prinzhorn) June 15, 2018
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.
יצירת פרוייקט חדש
ראשית ניצור פרוייקט חדש של ריאקט באמצעות 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
אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.
תודה רבה
מאמר מעולה