שימוש בשיטת Animated.spring() לאנימציות דינמיות ב-React Native

ספריית ה-API האנימציה של React Native יכולה לעזור לך ליצור אנימציות דינמיות וזורמות עם מעט מאמץ.

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

מהן אנימציות דינמיות?

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

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

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

שליטה באנימציה

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

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

לדוגמה:

const stopAnimation = () => {
 position.stop(ערך => {
 position.setValue(0);
 });
};

שימו לב כיצד תוכלו להשתמש ב- הגדר ערך() שיטה לאיפוס ערך המיקום למצבו ההתחלתי של 0.

שיטה נוספת העומדת לרשותך היא אִתחוּל(), שמחזיר את האנימציה למצבה ההתחלתי. שיטה זו שימושית כאשר אתה צריך להפעיל מחדש אנימציה.

אפליקציות בעולם האמיתי

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

ראשית, צור משתנה מצב כדי לעקוב אחר מיקום הכדור:

יְבוּא תגובה, { useState } מ'לְהָגִיב';
יְבוּא { אנימציה } מ'תגובה-יליד';
const אפליקציה = () => {
const [עמדה, setPosition] = useState(חָדָשׁ אנימציה. ערך(0));

לַחֲזוֹר (
שינוי צורה: [{ לתרגםY: מיקום }] }}>
 {/* רכיב הכדור כאן */}
 </Animated.View>
 );
};

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

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

const startAnimation = () => {
 Animated.spring (מיקום, {
 להעריך: 300,
 חיכוך: 1,
 מתח: 10,
 useNativeDriver: נָכוֹן,
 }).הַתחָלָה(() => {
 Animated.spring (מיקום, {
 להעריך: 0,
 חיכוך: 1,
 מתח: 10,
 useNativeDriver: נָכוֹן,
 }).הַתחָלָה();
 });
};

להשתמש Animated.spring() כדי ליצור אנימציה שתזיז את הכדור מהמיקום ההתחלתי שלו של 0 למיקום סופי של 300. לפרט חיכוך ו מתח ערכים לשליטה באפקט ההקפצה של הכדור בזמן ההגדרה השתמש ב-NativeDriver ל נָכוֹן לשיפור הביצועים.

לאחר מכן תוכל ליישם את הקוד כדי להפעיל את האנימציה כאשר משתמש מקיים אינטראקציה עם הכדור:

לַחֲזוֹר (

שינוי צורה: [{ לתרגםY: מיקום }] }}>
 {/* רכיב הכדור כאן */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

קוד זה עוטף את אנימציה. נוף רכיב ב ניתן לגעת ללא משוב כך שהאנימציה מופעלת כאשר המשתמש לוחץ על הכדור. אתה יכול גם להפעיל את האנימציה כאשר הרכיב עולה על ידי קריאה ל- startAnimation() פוּנקצִיָה בתוך של React useEffect() וו.

עם קוד זה, אתה אמור ליצור אנימציה של כדור נופל באמצעות Animated.spring().

אנימציות דינמיות ב-React Native

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

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

על ידי שילוב של Animated.spring() עם פונקציות אנימציה אחרות, כגון Animated.timing() או Animated.sequence(), תוכלו ליצור אנימציות מורכבות וחלקות המשפרות את חווית המשתמש.