XML Animations
Android Resource Directory בשם anim. כל קובץ בתיקייה מגדיר אנימציה אחת.AnimationUtils.loadAnimation(this, R.anim.rotate) ושולחים אותה ישר ל-startAnimation. הפונקציה מחזירה Animation כללי, והאובייקט בפועל הוא לפי התגית בקובץ.rotate עם תגית rotate ריקה ובה fromDegrees 0, toDegrees 360, pivotX ו-pivotY על 50%, ו-duration 1000.scale עם fromXScale 1, toXScale 1.5, fromYScale 1, toYScale 2, pivot על 50%, משך 1000, repeatCount 1 ו-repeatMode reverse.fromXDelta 0, toXDelta 100, fromYDelta 0, toYDelta 200. ב-alpha יש fromAlpha 1 ו-toAlpha 0.2. בשניהם משך 1000, חזרה אחת ו-reverse.set שמכילה את ארבע האנימציות. את ה-namespace משאירים רק בתגית העליונה.set עם rotate ושני scale. ה-scale הראשון מקבל startOffset של 1000 מילי-שניות. ה-scale החוזר (1 ל-0.66 ב-X ול-0.5 ב-Y) מקבל השהיה של 2000. הדובר מציין שב-XML אי אפשר לכתוב שני שלישים כמו בקוד, ולכן משתמשים ב-0.66.interpolator. הפונקציות, כמו bounce_interpolator, נמצאות תחת @android:anim/.set נדרשת רק כשיש כמה אנימציות. לאנימציה בודדת משתמשים בתגית שלה ישירות.פרקי ההרצאה: XML Animations
תמלול ההרצאה: XML Animations
הטקסט המלא של הדקות הראשונות בהרצאה «XML Animations» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
בנושא האנימציות ראינו איך אנחנו יכולים לבצע אנימציה על ידי שימוש באובייקטי Animations, כגון Rotate Animation, Scale Animation, Translate Animation וAlpha Animation, וכמובן קומבינציות ביניהם.
וראינו איך אנחנו יכולים לעשות אנימציות בטכניקה אחרת על ידי Object Animator, שיכול לקחת כל תכונה בעצם כמעט ולבצע אנימציה על התכונה, לשנות אותה כתלות בזמן. וגם כך לבצע לא פחות אלא אפילו יותר אנימציות שונות.
אבל גם בטכניקה הראשונה וגם בטכניקה השנייה אנחנו עשינו הכל בג'אבה קוד, ואנחנו דרך קוד ג'אבה יצרנו את האובייקטים, הגדרנו את כל ההגדרות המתאימות לאנימציות הדרושות, והפעלנו את האנימציה.
זה עבד פרפקט, אבל יש עוד טכניקה שמאפשרת להגדיר את כל ההגדרות האלה, גם עבור אובייקטי animation וגם עבור object animator והטכניקה הזאת פשוט אומרת ההגדרות עצמן של האנימציה מתבצעות בקבצי XML מה היתרון?
דבר ראשון אפשר להגדיר קובץ XML אחד ואז להשתמש עם ההגדרות האלה במספר מקומות בקוד יתרון שני הוא שהקוד הרבה יותר מצומצם יתרון שלישי, כל פעם שאנחנו יכולים להעביר מידע או כתיבת קוד מג'אבה לקבצי XML זה הרבה יותר נכון והרבה יותר טוב.
אז בסרטון הזה מה שאנחנו הולכים לראות זה בדיוק את אותה דוגמה שביצענו עבור איבייקטי האנימיישן, Rotate Animation, Scale Animation וכו', איך אנחנו יכולים לעשות בדיוק את הדוגמה הזאת עם כל האנימציות הללו, אבל ההגדרות עצמן בקבצי XML, וכך ה-Java Code שלנו הופך להיות הרבה הרבה יותר מצומצם.
אז קודם כל בואו נסתכל רגע מה עשינו בדוגמה הזאת וכרגע אני פתחתי את הדוגמה והרצתי אותה יש לנו כאן את הRotate Animation, יש לנו את הScale Animation, Translate מזיז את התמונה, Alpha משנה את השקיפות שלה קומביין מבצע את כולם ביחד, אופסט מבצע את כולם ביחד או חלק מהם אבל בצוזה ואינטרפולטור ואיזושהי פונקציית אנימציה
שמתלבשת על אנימציה קיימת וטיפה עושה אותה בצורה שונה מהדפולט. אנחנו רוצים לבצע בדיוק את אותו הדבר רק בקבצי XML ואנחנו הולכים להתחיל עם הרוטייט אנימשן.
אז כל פעם שאנחנו רוצים לבצע הגדרות עבור אובייקטי האנימיישן השונים, אני לא מדבר כרגע על האובייקט אנימטור, אלא רק על אובייקטי האנימיישן, הורות את האנימיישן, סקייל אנימיישן וכו', כל הגדרות האלה צריכות להיות בתקייה ספציפית, בואו נוסיף Android Resource Directory, והתקייה הזאת נקראת Anim.
בואו נצרף אותה, והנה אנחנו רואים אותה כאן, ובתוך האנים אנחנו צריכים להגדיר את קבצי ה-XML השונים, כל קובץ מגדיר אנימציה אחת. אז אנחנו הולכים להתחיל עם ה-Rotet Animation, עכשיו זה לא שלא הולך להיות לנו Java Code, אבל ההגדרות השונות שהגדרנו הולכות להיות בקבצי ה-XML.
אז בואו נוסיף קובץ XML1, Animation Resource File, לסלימו לב שאני לוחץ מכה שמני על תקיית האנים, New Animation Resource File, והקובץ הראשון פשוט הולך לבצע את ההגדורות עבור ה-Rotate Animation, אז בואו נקרא לו פשוט Rotate, מבצע Enter, והנה יש לנו כאן כבר תגיט ראשונה Set, אבל אנחנו לא צריכים תגיט Set,
תגיט Set אנחנו נראה עוד מעט, והיא מאפשרת להגדיר קבוצה של אנימציות, אנחנו רוצים להגדיר אנימציה אחת והיא הרוטייט, אז במקום set בואו נרשום רוטייט, ואנחנו רוצים, קודם כל אפשר להגדיר את כל התגית הזאת כתגית ריקה, כי יש לנו פה רק אנימציה אחת שהיא רוטייט, וכאן אנחנו רוצים להתחיל להגדיר
את התכונות של הרוטייט. אז בואו נסתכל רגע מה היה לנו כאן, from 0 to 360, היה לנו כאן relative to self, היה לנו כאן 50% גם ב-x וגם ב-y, והיה לנו כאן duration של אלף, כל הגדרות האלה הולכות להיות בקובץ ה-XML.
אז בואו נתחיל, יש לנו כאן from degrees, היה לנו 0, יש לנו two degrees, היה לנו 360, יש לנו כאן pivot x וזה יהיה 50 אחוז, הדפולט זה relative to self במקרה הזה, ויש לנו pivot y וזה גם 50 אחוז, ולבסוף duration וזה יהיה 1000 מילי שניות.
וזהו, פה סיינו להגדיר את ההגדרות האלה, ועכשיו אנחנו רוצים לגשת, ובמקום לבנות את האובייקט הזה ולהגדיר את כל ההגדרות האלה, אנחנו רוצים פשוט לשאוב את המידע מקובץ ה-XML.
וזה יהיה מאוד פשוט, בואו ניפטר מהRotateAnimation ואין לנו כאן כרגע את אובייקט הRotateAnimation אלא אנחנו רוצים לגשת לAnimationUtils.loadAnimation וloadAnimation אומרת לנו תנו לי בבקשה קונטקסט זה יהיה כמובן this ותנו לי את ה-ID של הקובץ שבו יש את האנימציה זה יהיה r.anim.rotate זה הקובץ.
עכשיו, מה בעצם מחזירה הפונקציה loadAnimation של animationUtils? אם היינו עושים את זה בשתי שורות נפרדות, אז הפונקציה הזאת הייתה מחזירה לנו את אובייקט האנימיישן המתאים.
לדוגמה, היינו יכולים לפתוח RotateAnimation, ולהכניס לתוכו את האובייקט הזה, ולשלוח את ה-RotateAnimation לפונקציה. כמובן כאן אנחנו צריכים לבצע קאסטינג בצורה כזאת וזה היה בסדר גמור אז אנחנו רואים שפונקציית Load Animation מחזירה בעצם את אובייקט הבסיס Animation ובגלל שהיא טענה את הקובץ ובקובץ היה לנו תגית Rotate
אז אוטומטית האובייקט שיתהן יהיה Rotate Animation ונוכל לבצע את הקאסטינג הזה אבל אנחנו נחסוך עוד יותר בקוד ופשוט נשלח את זה בצורה כזאת בפונקציית Start Animation ובואו נריץ בואו נלחץ הלחצן ה-Rotate וקיבלנו בדיוק את אותו האפקט שוב פעם נלחץ ושוב פעם ואנחנו רואים שהצלחנו להגדיר את האנימציה בקובץ ה-XML האנימציה הבאה שעשינו זה היה
scale animation, אז בואו נצרף עכשיו קובץ אחר, כי כל אנימציה יושבת בקובץ משלה, ונקרא לזה scale.xml, במקום set נגדיר scale, ואנחנו רוצים תגית ריקה כי אין לנו פה תוכן אחר, ואת התכונות, האטריביוטס של סקייל, זה האטריביוטס שבדיוק היינו מגדירים כאן.
מה הגדרנו כאן? x הולך מ-1 עד 1.5, y הולך מ-1 עד 2, שתי הם relative to self, 50%, duration, 1000, repeat count 1, וrepeat mode reverse.
בואו נגדיר את כל ההגדרות האלה בסקייל. אז יש לנו from x, סקייל, זה היה 1. לאחר מכן יש לנו 2x scale יש לנו 1.5, ההגדרה הבאה הייתה from y scale גם כן 1, תמיד המתמידה הראשונית היא 1, To Y Scale היה לנו 2, כי אנחנו רוצים בדיוק את אותו אפקט.
Pivot X 50%, שוב פעם, ה-Default זה Relative to Self, Pivot Y זה 50%, ואנחנו רוצים Do Ration 1000 מילי שניות, לאחר מכן Repeat Count יהיה 1, ו-Repeat Mode יהיה Reverse Gold.
בואו נחזור בחזרה ל-Java Code, נעתיק את השורה הזאת, Ctrl-C, ונדביק אותה במקום כל ההגדרות האלה כאשר הקובץ ו-Scale, בואו נריץ, בואו נלחץ על Scale וקיבלנו בדיוק את אותו אפקט כאשר המידע נטען מקובץ ה-XML.
הדבר השלישי שעשינו זה translate, בואו נראה איך זה מתבצע, נצרף קובץ animation resource file, נקרא לו translate, נחליף את תגית ה-set ב-translate, נגדיר את התגית הזאת כתגית ריקה, ובואו נסתכל עוד פעם מה היו התכונות.
אז ב-Translate עשינו העתקה מ-0, שזה המיקום הנוכחי, ציר x ל-100 פיקסלים, זה ייקח את זה טיפה ימינה, ו-0, ציר y ל-200, זה ייקח את זה למטה, Duration 1000, Repeat Count 1 ו-Repeat Mode Reverse, בואו נגדיר את כל ההגדרות האלה, יש לנו From x Delta זה 0, ממש אותם הגדרות בדיוק,
2xdelta היה לנו 100, from ydelta היה לנו