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

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

למה להשתמש באנימציות ב-React?

ישנן סיבות רבות מדוע אולי תרצה להשתמש באנימציות באפליקציית React שלך. כמה מהסיבות הנפוצות ביותר כוללות:

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

ישנן מספר דרכים להוסיף אנימציות לרכיבי React. השלושה שתלמדו על השימוש כאן הן אנימציות בסגנון מוטבע, ספריית הנפשות-react ו-react-simple-animate ספריית.

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

שיטה 1: שימוש בהנפשות בסגנון מוטבע

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

יְבוּא תגובה, { רכיב } מ 'לְהָגִיב';
מעמדלהתפוגג החוצהמשתרערְכִיב{
בַּנַאִי(אביזרים) {
סוּפֶּר(אביזרים);


זֶה.state = {
 isVisible: שֶׁקֶר
 };
 }


render() {
const סגנונות = {
אֲטִימוּת: זֶה.מדינה.isVisible? 1: 0,
 מַעֲבָר: 'אטימות 2s'
 };


לַחֲזוֹר (
<div>
<div style={סגנונות}>
 שלום עולם!
</div>
<button onClick={this.toggleVisibility}>
 לְמַתֵג
</button>
</div>
 );
 }


toggleVisibility = () => {
זֶה.setState (prevState => ({
isVisible: !prevState.isVisible
 }));
 }
}
יְצוּאבְּרִירַת מֶחדָל להתפוגג החוצה;

בדוגמה זו, לאובייקט בסגנון יש מאפייני אטימות ומעבר. האטימות היא 0 כאשר הרכיב אינו גלוי, ו-1 כאשר הוא נראה. תכונת המעבר היא "אטימות 2s", מה שיגרום לאטימות לעבור על פני שתי שניות כאשר היא משתנה.

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

שיטה 2: שימוש בספריית ה-react-animations

דרך נוספת להוסיף אנימציות לרכיבי React היא להשתמש בספרייה כמו react-animations. ספריה זו מספקת קבוצה של אנימציות מוגדרות מראש שתוכל להשתמש בהן ברכיבי React שלך.

כדי להשתמש ב-react-animations, תחילה תצטרך להתקין את הספרייה:

npm להתקין אנימציות תגובה --להציל

אתה גם צריך להתקין אפרודיטה, שהיא תלות של אנימציות תגובה:

npm להתקין אַפְרוֹדִיטָה --להציל

לאחר שהתקנת את הספריות, תוכל לייבא את האנימציות שבהן תרצה להשתמש:

יְבוּא { fadeIn, fadeOut } מ 'אנימציות תגובה';

לאחר מכן, תוכל להשתמש בהנפשות ברכיבים שלך:

יְבוּא תגובה, { רכיב } מ 'לְהָגִיב';
יְבוּא { StyleSheet, css } מ 'אַפְרוֹדִיטָה';
יְבוּא { fadeIn, fadeOut } מ 'אנימציות תגובה';
const styles = StyleSheet.create({
 דועך: {
 אנימציה שם: fadeIn,
 אנימציה משך: '2 שניות'
 },
 fadeOut: {
 אנימציה שם: fadeOut,
 אנימציה משך: '2 שניות'
 }
});


מעמדלהתפוגג החוצהמשתרערְכִיב{
בַּנַאִי(אביזרים) {
סוּפֶּר(אביזרים);


זֶה.state = {
 isVisible: שֶׁקֶר
 };
 }


render() {
const className = זֶה.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);


לַחֲזוֹר (
<div>
<div className={className}>
 שלום עולם!
</div>
<button onClick={this.toggleVisibility}>
 לְמַתֵג
</button>
</div>
 );
 }


toggleVisibility = () => {
זֶה.setState (prevState => ({
isVisible: !prevState.isVisible
 }));
 }
}
יְצוּאבְּרִירַת מֶחדָל להתפוגג החוצה;

דוגמה זו מתחילה בייבוא ​​הנפשות FadeIn ו-fadeOut מספריית האנימציות react. לאחר מכן הוא מגדיר אובייקט סגנונות עם אנימציות ה-fadeIn ו-fadeOut, וה-animationDuration מוגדרים לשתי שניות.

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

שיטה 3: שימוש בספריית react-simple-animate

ספריית react-simple-animate מספקת דרך פשוטה להוסיף אנימציות לרכיבי React. הוא מציע API הצהרתי שמקל על הגדרת הנפשות מורכבות.

כדי להשתמש בספרייה, עליך להתקין אותה תחילה:

npm להתקין להגיב-פשוט-הנפש --להציל

לאחר מכן, אתה יכול להשתמש בו ברכיבים שלך:

יְבוּא תגובה, { רכיב } מ 'לְהָגִיב';
יְבוּא { Animate, AnimateKeyframes} מ "להגיב-פשוט-להחיות";
מעמדאפליקציהמשתרערְכִיב{
 render() {
לַחֲזוֹר (
<div>
<לְהַנפִּישׁ
 לְשַׂחֵק
הַתחָלָה={{
 אטימות: 0
 }}
סוֹף={{
 אטימות: 1
 }}
>
<div>
 שלום עולם!
</div>
</Animate>
<AnimateKeyframes
 לְשַׂחֵק
 duration={2}
 keyframes={[
 { אטימות: 0, טרנספורמציה: 'translateX(-100px)' },
 { אטימות: 1, טרנספורמציה: 'translateX(0px)' }
 ]}
>
<div>
 שלום עולם!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

ה לְהַנפִּישׁ רכיב דוהה באלמנט div. זה מתחיל באטימות של 0 ומסתיים באטימות של 1. אביזר ההפעלה מוגדר כ-true, מה שיגרום לאנימציה לפעול באופן אוטומטי כאשר הרכיב עולה.

ה AnimateKeyframes רכיב הנפשה של רכיב div במשך שתי שניות. מערך ה-keyframes מציין את מצבי ההתחלה והסיום של האנימציה. לפריים המפתח הראשון יש אטימות של 0 וערך translateX של -100px. לפריים המפתח השני יש אטימות של 1 וערך translateX של 0px.

הגבר את מעורבות המשתמש עם אנימציות

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

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

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