תחילת העבודה עם אנימציות ב-React Native

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

חקור אנימציות של React Native וגלה כיצד תוכל להתחיל ליצור אנימציות יפות וחלקות.

איך עובדות אנימציות מקוריות של React Basic?

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

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

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

לדוגמה:

יְבוּא תגובה, { useState, useEffect } מ'לְהָגִיב';
יְבוּא { View, StyleSheet } מ'תגובה-יליד';
const אפליקציה = () => {
// אתחול המצב כדי לעקוב אחר מיקום התיבה
const [boxPosition, setBoxPosition] = useState(0);





instagram viewer

// השתמש בהוק useEffect כדי לעדכן את מיקום התיבה כל שנייה
 useEffect(() => {
const interval = setInterval(() => {
// עדכן את מיקום התיבה על ידי הוספת 10 למיקום הנוכחי
 setBoxPosition(prevPosition => prevPosition + 10);
 }, 1000);
// החזר פונקציית ניקוי כדי לנקות את המרווח כאשר הרכיב
// מבטל
לַחֲזוֹר() => clearInterval (מרווח);
 }, []);
// הגדר את מיקום התיבה באמצעות משתנה המצב בסגנון המוטבע
const boxStyle = {
 שינוי צורה: [{ לתרגםY: boxPosition }]
 };
לַחֲזוֹר (


 </View>
 );
};
const styles = StyleSheet.create({
 מיכל: {
 לְהַגמִישׁ: 1,
 alignItems: 'מֶרְכָּז',
 justifyContent: 'מֶרְכָּז',
 },
 קופסא: {
 רוֹחַב: 100,
 גוֹבַה: 100,
 צבע רקע: 'כְּחוֹל',
 },
});
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

קוד זה יוצר תיבה כחולה הנעה כלפי מטה כל שנייה. האנימציה פועלת באמצעות ה- useEffect וו ליצירת טיימר שמעדכן את BoxPosition משתנה מצב כל שנייה אחת.

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

הם מספר ספריות אנימציה כמו אנימציה סִפְרִיָה, להגיב-יליד-מחדש, ו להגיב-יליד-ניתן להחיות לבניית אנימציות ביצועיות ב-React Native. כל אחת מספריות האנימציה הללו מוחקת את הנושא של עדכוני מצב אסינכרוני והיא אידיאלית לחלוטין.

ממשק API האנימציה של React Native

Animated הוא API ש-React Native מספק. אתה יכול להשתמש בו כדי ליצור אנימציות חלקות המגיבות לאינטראקציות של משתמשים או לשינויי מצב.

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

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

כדי להתחיל להשתמש ב-Animated בפרויקט React Native שלך, עליך לייבא את אנימציה מודול מ'תגובה-יליד' לתוך הקוד שלך:

יְבוּא { אנימציה } מ'תגובה-יליד';

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

const animatedValue = חָדָשׁ אנימציה. ערך(0);

ה אנימציה. ערך היא מחלקה ב-React Native Animated API שמייצגת ערך שניתן לשינוי. אתה יכול לאתחל אותו עם ערך ראשוני, ולאחר מכן לעדכן אותו לאורך זמן באמצעות שיטות אנימציה שונות המסופקות על ידי ה- Animated API, כמו .תִזמוּן(), .אביב(), ו .ריקבון(), על ידי ציון משך ההנפשה, פונקציית ההקלה ופרמטרים אחרים.

הערך המונפש דומה לערך מצב ברכיב React.

אתה יכול לאתחל an אנימציה. ערך עם ערך המצב ההתחלתי של רכיב, ולאחר מכן עדכן אותו לאורך זמן באמצעות ה- setState שיטה.

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

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

const אפליקציה = () => {
const [count, setCount] = useState(0);
const animatedValue = חָדָשׁ אנימציה. ערך (ספירה);
};

ואז, בכל פעם ש לספור עדכוני ערך המדינה, אתה יכול לעדכן animatedValue גַם:

const handlebuttonClick = () => {
 setCounter (ספירה + 1);
 Animated.timing (animatedValue, {
 toValue: count + 1,
 מֶשֶׁך: 500,
 useNativeDriver: נָכוֹן
 }).הַתחָלָה();
};

דוגמה זו מתעדכנת animatedValue משתמש ב Animated.timing() שיטה בכל פעם שמשתמש לוחץ על הכפתור. ה animatedValue מניע את האנימציה, והיא משנה ערך במשך 500 מילישניות.

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

כעת אתה מבין כיצד לתפעל ערך מונפש, לאחר מכן תוכל להמשיך לבצע אינטרפולציה של הערך המונפש ולמפות אותו למאפיין סגנון של הרכיב שלך באמצעות Animated.interpolate() שיטה.

לדוגמה:

const opacity = animatedValue.interpolate({
 טווח קלט: [0, 1],
 טווח פלט: [0, 1]
});
לַחֲזוֹר (

 {/* תוכן הרכיבים שלך */}
 </View>
);

פעולה זו תיצור אנימציה שדוהה בהדרגה ב- נוף רכיב כשהערך המונפש משתנה מ-0 ל-1.

הבנת סוגי אנימציה

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

משתמש ב השתמש ב-NativeDriver אפשרות עם אנימציה משפרת את הביצועים. אפשרות זו מאפשרת לך להוריד אנימציות לשרשור ה-UI המקורי. זה יכול לשפר משמעותית את הביצועים על ידי הפחתת כמות העיבוד של JavaScript הנדרש.

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

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

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

קבל נוחות עם אנימציות מקוריות של React

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

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