אנימציה ראשונה שלי באנדרואיד
ImageView ארבע אנימציות בסיסיות, שילוב ביניהן והשהיה בין אחת לשנייה, כשכל אנימציה מופעלת מלחצן.RotateAnimation מ-0 עד 360 מעלות, קובעים setDuration של 1000 מילי-שניות ומפעילים עם startAnimation על ה-ImageView. כברירת מחדל התמונה מסתובבת סביב הפינה השמאלית העליונה. כדי לסובב סביב המרכז שולחים Animation.RELATIVE_TO_SELF עם 0.5 לציר x ולציר y.ScaleAnimation מ-1 עד 1.5 בציר x ומ-1 עד 2 בציר y, גם כאן עם RELATIVE_TO_SELF ו-0.5. בסוף התמונה קופצת מיד חזרה לגודל המקורי. כדי שתחזור בהדרגה מגדירים setRepeatCount(1) ו-setRepeatMode(Animation.REVERSE). מצב RESTART מתחיל מחדש מההתחלה.TranslateAnimation מ-0 עד 100 פיקסלים בציר x ומ-0 עד 200 בציר y, עם אותם חזרה והיפוך.AlphaAnimation מ-1 (אטום לגמרי) עד 0.2, ו-0 הוא שקוף לגמרי. אם מבטלים את החזרה, התמונה חוזרת מיד למצב ההתחלתי. הקריאה setFillAfter(true) משאירה אותה במצב הסופי אחרי שהאנימציה נגמרת.AnimationSet, שמקבל ערך בוליאני של shareInterpolator (כאן false), מוסיפים אליו את האנימציות עם addAnimation ומפעילים את ה-set על התמונה. כל ארבע האנימציות רצות יחד.setStartOffset של שנייה. אם משאירים את RepeatCount, גם ההחזרה מחכה שנייה.ScaleAnimation נוסף שחוזר אחורה, מ-1 ל-2/3 בציר x ומ-1 ל-0.5 בציר y. נותנים לו offset של שתי שניות ומוסיפים אותו ל-AnimationSet. בהרצאה שכחו תחילה להוסיף אותו, ולכן ההקטנה קרתה מיד.setInterpolator מחליפים אותה, למשל ב-BounceInterpolator, והתזוזה בציר y מ-0 עד 500 נראית כקפיצות, גם בחזרה. את שאר הפונקציות רואים בסרטון הבא.פרקי ההרצאה: אנימציה ראשונה שלי באנדרואיד
תמלול ההרצאה: אנימציה ראשונה שלי באנדרואיד
הטקסט המלא של הדקות הראשונות בהרצאה «אנימציה ראשונה שלי באנדרואיד» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לנושא שנקרא Animations. ב-Animations אנחנו הולכים לראות איך אנחנו יכולים לבנות באפליקציה שלנו אנימציה. מה זה בעצם אנימציה? אנימציה זה תזוזה כלשהי או שינוי כלשהו כתלות בזמן.
נניח אנחנו יכולים להציב איזשהו אלמנט, להזיז אותו במרחב לאורך זמן וזה ייראה כאנימציה. לדוגמה אנחנו יכולים לשנות צבע של אלמנט כתלות בזמן או לאורך זמן וזה ייראה חלק מהאנימציה.
אז יש באנדרואיד מספר שיטות ומספר אנימציות שונות שניתן לבצע, ובסדרת הסרטונים הבאים אנחנו הולכים לראות כל מיני שיטות לבנות אנימציה. אז קודם כל בואו נראה מה יש לנו כאן מבחינת נמשק המשתמש.
יש לנו לחצן שכתוב עליו Rotate, ויש לנו תמונה, וכל מה שאנחנו רוצים לעשות זה בלחיצה על Rotate לבצע סיבוב של התמונה הזאת. נניח ב-360 מעלות.
אז בואו נראה איך אנחנו יכולים לבצע את זה, וזאת תהיה האנימציה הראשונה שאנחנו הולכים לעשות. יש לנו פה את הלחצן, בלחיצה עליו אנחנו מפעילים את האירוע rotate, בואו ניגש לקוד.
יש לנו פה את אובייקט התמונה שמצאנו, ואנחנו רוצים בלחצן להרים אנימציה או לבצע אנימציה על התמונה הזאת. אז כאן אנחנו הולכים להשתמש באובייקטים בקוד שמתארים אנימציה.
לדוגמה, אם אנחנו רוצים לבצע אנימציה של Rotate, אז אנחנו נשתמש ב-RotateAnimation. אז הנה יש לנו אובייקט RotateAnimation, ואנחנו מגדירים אובייקט חדש ממנו, מסוג RotateAnimation, ואנחנו רואים שיש לנו פה כל מיני אפשרויות לשלוח לאובייקט הזה מידע, ובואו ניקח לדוגמה את המסע שאומרת from degrees to degrees.
אז אנחנו רוצים מ-0 עד 360. אחרי שהגדרנו את ה-Rotate Animation, בואו ניגש ל-Rotate Animation וניתן לו Duration. כמה זמן במילי שניות אנחנו רוצים לבצע את האנימציה?
בואו ניתן 1000 מילי שניות שזה בעצם שנייה אחת. ולבסוף אנחנו רוצים לגשת ל-Image View שלנו ו-To Start Animation. ולתת את האובייקט אנימציה שלנו Rotate Animation בואו נריץ את זה, בואו נלחץ על הלחצן ויש לנו עכשיו את הסיבוב של התמונה אבל שימו לב שהיא מסתובבת מסביב לאיזשהו ציר דמיוני שנמצא כאן
בחלק השמאלי העליון של התמונה שזה יכול להיות לפעמים משהו שאנחנו רוצים אבל לפעמים לא לפעמים אנחנו רוצים שהתמונה הזאת תסתובב בדיוק בציר הדמיוני של האמצע כאן יש לנו עוד המסות שאנחנו יכולים לראות עבור אובייקט ה-Rotate Animation לדוגמה בואו ניקח את המסה שמתארת את Pivot X וPivot Y וPivot X Value וPivot Y Value Pivot זה בעצם דזוזה מסוימת מהמיקום הדפולטי
אז בואו נראה איך אנחנו יכולים לעבוד עם זה אז יש לנו קבוע שנקרא animation.relativeToSelf, relativeToParent אז אנחנו יכולים פשוט לקחת לדוגמה relativeToSelf כלומר יחסית למי אנחנו רוצים לבצע את השינוי ואז אנחנו יכולים לשלוח 0.5 במשתנה float בכדי לומר שאנחנו רוצים בדיוק 50% זה עבור ציר x לאחר מכן אנחנו יכולים לתת Pivot Y Type,
שזה גם כן Animation Relative to Self, ושוב פעם 0.5, כי אנחנו רוצים שהוא יהיה בדיוק באמצע גם מבחינת ה-Y, בואו נריץ, בואו נלחץ שוב פעם על הלחצן, ואנחנו רואים שעכשיו הסיבוב מתבצע מסביב לציר הדניוני של מרכז התמונה.
כל לחיצה יש לנו סיבוב שמתבצע במשך שנייה אחת מסביב לאמצע אז הנה הצלחנו לעשות את Rotate Animation בואו ניגש לממשק המשתמש שלנו ונייצר עוד לחצן עבור סוג אחר של אנימציה נשכפל את הלחצן ופעם ניגש ונבנה Scale Animation Scale זה בעצם עמת מידה בואו ניקח פה לחצן Scale ואנחנו בעצם רוצים לבצע
אנימציה שתשנה את המימדים של התמונה או את המת המידה שלה, ניגש לקוד שלנו ונראה איך אנחנו יכולים הפעם לעשות אנימציה של סקייל אז בואו נבנה אובייקט Scale Animation, נגדיר שווה New Scale Animation ואנחנו רואים שאנחנו גם כאן צריכים לתת לו From, To וכל מיני פרמטרים נוספים בואו ניתן לו from one to one and a half,
float, זה על ציר x, from one to, בואו נניח two עבור ציר y, ושוב פעם בואו ניתן את כל הקונספט של relative to self, animation.relative to self עבור ציר x, אנחנו רוצים לתת לו 0.5 float ושוב פעם relative to self ו0.5 float עבור ציר y בכדי שציר x וציר y יהיו ממש שינוי הגיוני מסביב לצירים האלה ואחר מכן שוב פעם יש לנו את scale
animation duration גם כן ניתן 1000 וניגש לתמונה, image view, start animation, ניתן את אובייקט האנימיישן שיצרנו עכשיו ואנחנו כבר יכולים לבדוק את זה נריץ, בואו נלחץ על לחצן ה-scale ואנחנו רואים שהתמונה גדלה פי 1.5 בציר X בציר הזה ופי 2 בציר ה-Y אתם רואים שציר ה-Y גדל יותר מאשר ציר X אנחנו יכולים לראות כאן שבציר x אמרנו לו
מ-1 עד 1.5 ובציר y מ-1 עד 2 שזה כמובן כפול 2. אבל כמו ששמנו לב התמונה לא חזרה בחזרה בצורה הדרגתית אלא חזרה בחזרה בבת 1. למה מקודם לא חזרנו בחזרה בבת 1 כאשר עשינו סיבוב?
כי בעצם אנחנו ראינו כבר בציר או בזווית 0 בסוף הסיבוב ולכן המערכת כבר נשארה על ציר 0 או גם היא ביצעה חזרה בבת אחת אז לא ראינו שום דבר בגלל שזווית 360 וזווית 0 הם אותו הדבר אוקיי, אז איך אנחנו יכולים לבצע את ההחזרה בצורה דרגתית?
אז בואו ניגש ל-ScaleAnimation ונגדיר SetRepeatCount, כלומר מספר הפעמים שאנחנו רוצים לבצע חזרה על האנימציה שעשינו הוא 1, לא 2, כי הפעם הראשונה שהגדרנו את האנימציה זה המצב הראשון וחזרה אנחנו רוצים פעם אחת בלבד.
דבר נוסף שאנחנו צריכים להגדיר זה Scale Animation נקודה Set Repeat Mode, כלומר מה הסוג של החזרה שאנחנו רוצים ויש לנו Animation נקודה Reverse לדוגמה ולא Restart.
Restart יתחיל מההתחלה וReverse יחזור פשוט בחזרה מהנקודה שהאנימציה עצרה בה. בואו נריץ את זה, בואו נלחץ שוב פעם על לחצן הסקייל ואנחנו רואים שמתבצעת גם הגדלה וגם הקטנה, כלומר הריפית מתבצע פעם אחת בלבד ומוחזר בחזרה.
אז ראינו כרגע שני סוגים של Animations, בואו נעבור לסוג השלישי, נשכפל את הלחצן והאנימציה הבאה שלנו נקראת Translate. Translate זה העתקה, כלומר הוא לא שינוי הגודל אלא הזזה למקום אחר.
בואו ניכנס אירוע, ואנחנו רוצים לבנות הפעם translateAnimation, עכשיו new object translateAnimation, והפעם אנחנו רוצים לומר לו from זה 0, זה המיקום בציר x, ו-to בואו ניקח 100 פיקסלים, כלומר תזוזה על ציר X תהיה 100 פיקסלים FROM גם כן ציר Y הוא מתחיל ב0 והפעם בואו נזוז 200 לציר Y אין צורך לתת מעבר לזה כרגע בואו ניגש ונתאר את הדוריישן
set duration גם כן בואו ניקח 1000 וגם כאן בואו ניקח translate animation SetRepeatCount יהיה 1 וTranslateAnimation SetRepeatMode יהיה אותו הדבר Animation Reverse ואז הוא חוזר בחזרה ניגש לאובייקט האימג' שלנו ImageView StartAnimation וניתן לו את ה-TranslateAnimation שבנינו והנה יש לנו עכשיו אנימציה דזוזה
בואו נריץ את זה בואו נלחץ על לחצן הטרנסלייט, ויש לנו תזוזה, ציר X 100 פיקסלים, ציר Y 200 פיקסלים, ולכן אנחנו רואים תזוזה לחסונית כזאת, ויש לנו עכשיו אנימציה של טרנסלייט, כלומר העתקה למקום אחר בצורה אנימטיבית.
בואו ניגש לאנימציה הרביעית, והאנימציה הרביעית נקראת Alpha. Alpha זה בעצם רמת השקיפות של הרכיב. נשכפל את זה, ניגש לקוד שלנו, ונבנה כרגע את Alpha Animation.
אובייקט Alpha Animation שווה ל-New, Alpha Animation, ואנחנו רואים שאנחנו צריכים לתת לו From ו-To. כאשר alpha בעצם מתארת יותר את רמת האטימות ולא רמת השקיפות אם יש לנו 1 זה אומר שהוא אטום לגמרי אם יש לנו 0 זה אומר שהוא שקוף לגמרי אז בואו לא ניתן לו שקוף לגמרי ניתן לו 0.2 וזה אמור להיות floaty
ושוב פעם נבצע את שלושת האלמנטים האלה בואו ניקח כבר את ארבעת השורות האלה נעתיק, נדביק ופשוט נשנה את זה לאובייקט ה-Alpha Animation שלנו ויש לנו כמובן את הדוריישן של שנייה אחת