כיצד ליצור אנימציה רציפה ב-React Native באמצעות Animated.loop()

אחת מתכונות המפתח של ממשק API האנימציה של React Native היא Animated.loop() שיטה שבה אתה יכול ליצור אנימציה רציפה שחוזרת על עצמה ללא הגבלה.

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

הבנת שיטת Animated.loop()

כדי להשתמש בשיטת Animated.loop(), תחילה עליך ליצור קובץ אנימציה. ערך לְהִתְנַגֵד. ערך זה מתעדכן בכל פריים של לולאת האנימציה וישמש להנפשה של רכיב היעד.

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

אובייקט תצורה זה יכול לכלול מאפיינים כגון מֶשֶׁך, הֲפָגָה, ו לְעַכֵּב, אשר קובעים כיצד תתנהג האנימציה.

לולאת האנימציה שלך

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

הדוגמה הבאה שמדגימה כיצד להשתמש ב-Animation.loop() כדי ליצור אנימציית סיבוב בלולאה:

יְבוּא תגובה, { useState, useEffect } מ'לְהָגִיב';
יְבוּא { StyleSheet, View, Animated, Image } מ'תגובה-יליד';
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
const [spinValue] = useState(חָדָשׁ אנימציה. ערך(0));
 useEffect(() => {
const spin = spinValue.interpolate({
 טווח קלט: [0, 1],
 טווח פלט: ['0 מעלות', '360 מעלות'],
 });
 Animated.loop(
 Animated.timing(
 spinValue,
 {
 להעריך: 1,
 מֶשֶׁך: 2000,
 useNativeDriver: נָכוֹן,
 }
 )
 ).הַתחָלָה();
 }, []);
לַחֲזוֹר (

 style={{ רוֹחַב: 200, גוֹבַה: 200, שינוי צורה: [{ להתחלף: spinValue }] }}
 מקור={{ אורי: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
const styles = StyleSheet.create({
 מיכל: {
 לְהַגמִישׁ: 1,
 alignItems: 'מֶרְכָּז',
 justifyContent: 'מֶרְכָּז',
 },
});

בדוגמה זו, אנו יוצרים אנימציה. אובייקט ערך נקרא spinValue והגדר את הערך ההתחלתי שלו ל-0. לאחר מכן אנו מתקשרים ל- לוּלָאָה() שיטה על Animated.timing() אובייקט, שלוקח את המדינה spinValue כטיעון שלו. האובייקט Animated.timing() מתאר כיצד האנימציה תתקדם לאורך זמן, ובמקרה זה, הוא מסובב תמונה ב-360 מעלות.

כדי להגדיר את משך הלולאה, עברנו את א מֶשֶׁך מאפיין לאובייקט Animated.timing(), אשר יקבע כמה זמן האנימציה תפעל לפני לולאה. הגדרנו את המאפיין duration ל-2000, כלומר 2 שניות לפני ההפעלה מחדש.

אתה יכול גם להגדיר את מספר הפעמים שהאנימציה צריכה ללולאה על ידי העברת ה- איטרציות מאפיין לשיטת loop() .

לדוגמה, נניח שאתה רוצה שהאנימציה תעבור לולאה חמש פעמים לפני הפסקה. במקרה כזה, אתה יכול לקרוא ל- Animated.loop() עם איטרציות: 5. אם אתה רוצה שהאנימציה תעבור לולאה ללא הגבלת זמן, אתה יכול להשמיט את איטרציות רכוש לחלוטין.

באמצעות Animation.loop(), קביעת משך הזמן שלו, ו יישום סגנון CSS כראוי לאובייקט התצוגה המוחזר, אתה יכול ליצור אנימציות בלולאות חלקות ב-React Native.

עבודה עם אנימציה מורכבת

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

להלן שני טיפים שיעזרו לך בעת ביצוע לולאה של אנימציות מורכבות ב-React Native:

1. חלק את האנימציה לחלקים קטנים יותר

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

2. השתמש בשיטת Animated.sequence()

ה Animated.sequence() השיטה מאפשרת לך להריץ רצף של אנימציות בזו אחר זו. שיטה זו יכולה ליצור אנימציות מורכבות בלולאה על ידי שרשור אנימציות בלולאות בודדות. אתה יכול להשתמש ב-Animated.sequence() כדי ליצור אנימציה שדוהה תחילה בתמונה, מסובבת אותה ולאחר מכן דוהה אותה, וחוזרת על כל הרצף לאחר שבוצעה.

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

נסה עם האנימציה שלך

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