Code Animators

תמלול ההרצאה: Code Animators

הטקסט המלא של הדקות הראשונות בהרצאה «Code Animators» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

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

2. 00:15

   אם אנחנו מריצים את זה אז אנחנו בעצם מקבלים את הדבר הבא. Rotate, פשוט מבצע Rotation, Scale, מגדיל, גם X, גם Y, Translate, מזיז, גם X, גם Y, Alpha, משנה את רמת השקיפות או האטימות, Combine, מבצע כמה ביחד, ו-Offset, יכול לבצע כמה ביחד עם איזשהו דילי בין אחד לשני, והאינטרפולטור, איזושהי פונקציה שראינו בסרטון הקודם את כל הפונקציות הקיימות.

3. 00:48

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

4. 01:16

   אוקיי, אבל זה לא האופציה היחידה לבצע אנימציה. יש עוד אובייקט ממש מעניין שנקרא Object Animator, וObject Animator זה טכניקה אחרת לבצע אנימציה.

5. 01:33

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

6. 01:54

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

7. 02:14

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

8. 02:37

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

9. 03:10

   האנימיישן להשתמש באובייקט האובג'קט אנימטור אז בואו נעבור פשוט לחצן לחצן ונבצע את האובג'קט אנימטור בכדי לקבל את אותו האפקט בדיוק אז יש לנו כאן את ה-Rotate Animation ואנחנו רוצים במקומו לבצע אנימציה על ידי האובג'קט אנימטור אז בואו נבנה פה אובייקט אובג'קט אנימטור ופשוט נקרא לו Rotate Animator שווה ובשביל לבנות אובייקט חדש

10. 03:42

    ממנו אנחנו צריכים את object animator ואז יש לנו off וכל מיני פונקציות שמאפשרות להגדיר אנימציה לפי טיפוס לדוגמה off float מאפשרת לנו להגדיר אנימציה על property שהוא מסוג float off int מאפשרת לבצע אנימציה על property שהוא מסוג int וכן הלאה אז אנחנו רוצים את פרופרטי הרוטיישן, אז אנחנו רוצים את float, עכשיו מה זה אומר פרופרטי

11. 04:16

    הרוטיישן? אם אנחנו רגע נעצור ונחזור ל-UI שלנו, ל-layout וניגש בוא נניח לאובייקט התמונה, אנחנו אוכל לראות שיש לתמונה מלא מלא פרופרטיז, ממש אנחנו יכולים לראות כאן את כל הפרופרטיז ואחד מהם זה rotation, אם בוא נניח נלך ל-rotation ונגדיר שאנחנו 180, אז שימו לב שהתמונה הסתובבה ב-180 מעלות, בואו

12. 04:45

    נגדיר לו 90 ונראה שהתמונה הסתובבה 90 מעלות מה-0 המקורי שלה. אתם רואים שהאפס המקורי שלה, התמונה ה-Smile הזה הוא טיפה מוטה באיזה שם כאילו 30 מעלות הצידה אז 90 מעלות זה בעצם מסובב אותו 90 מעלות לכיוון השעון אז אם היא קיימת תכונה שנקראת Rotation, אנחנו יכולים to animate את התכונה הזאת אז בואו נחזור בחזרה, נגדיר את

13. 05:19

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

14. 05:39

    זה יהיה ה-image view. לאחר מכן, כ-string, מהי התכונה? זה היה rotation. לאחר מכן, אם אנחנו נכנס ונבדוק את ה-properties, אנחנו נראה שיש לנו כאן פשוט את הערכים שאנחנו רוצים לתת.

15. 06:02

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

16. 06:33

    מ-0 שזה המיקום הנוכחי שלך עד 360 באובג'קט אנימטור הסיפור הזה הוא קצת אחר הוא אומר לנו אפילו תגידו לי מה בעצם היד שאתם רוצים ואני אקח אתכם לשם מהמקום הנוכחי שלי תכף נראה אם זה באמת יהיה טוב או לא טוב ספציפית לרוטט לעשות 360 אבל בואו נשאר כרגע עם ה360 והדבר הבא זה ה-Set Duration כמו שהיהנו מקודם

17. 06:58

    בואו ניקח את ה-Rotet Animator, Set Duration ניתן אותו דבר כי אנחנו רוצים את אותו האפקט וכל מה שאנחנו צריכים לעשות זה Rotate Animation נקודה Start וזה מפעיל את האנימציה אנחנו יכולים עכשיו להיפטר משלושת השורות האלה שהיו של האנימציה הקודמת כי אנחנו רוצים להחליף את כל ההדגמה הזאת בשימוש ב-Object Animator

18. 07:25

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

19. 08:00

    בפעם הבאה שאנחנו מבצעים את הלחצן ואומרים לו תקשיב תביא אותנו ל-860 אין לו מה לעשות כי הוא כבר ב-360 בשביל לטפל בבעיה הזאת אנחנו צריכים להגיד לו from ו-to אז כאן אנחנו אומרים לו תקשיב תתחיל מ-0 ותביא אותנו ל-360 לא משנה מה הייתה לפני זה בואו נבדוק בואו נלחץ על הלחצן בפעם הראשונה סיבוב מלא ונלחץ עוד פעם וסיבוב מלא כל פעם שאנחנו לחצים הוא

20. 08:32

    מתחיל מ-0, מסובב 360 ואנחנו קיבלנו את אותו האפקט של ה-Rotate Animation שהשתמשנו איתו בסרטון הראשון. בואו נעשה את זה עכשיו לסקייל, מה היה לנו בסקייל?

21. 08:48

    בסקייל היה לנו מ-1 עד 1.5 עד ציר X ומ-1 עד 2 עד ציר Y ואז העמת המידה גדלה. אבל שימו לב שיש לנו כאן חזרה בחזרה מה שלא היינו מקודם ברוטייט אז אנחנו רוצים לבנות כאן Object Animator אנחנו רוצים לקרוא לו Scale Animation או Animator ליתר דיוק וניתן לו Object Animator נקודה Off Float זה גם כן ערך פלוטי עבור image view אנחנו רוצים לגשת

22. 09:31

    ואיזה תכונה אנחנו רוצים לשנות. כאן אנחנו צריכים לעצור ולראות איזה תכונה אחראית על הסקיילינג. בואו נחפש ונראה שיש לנו פה תכונה שנקראת scale x והנה אנחנו רואים תכונה שנקראת scale y.

23. 09:50

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

24. 10:10

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

25. 10:21

    אנחנו פשוט צריכים לקחת שני אובייקטי object animator, אחד עבור scale x animator, ולכן התכונה שאנחנו רוצים לתת כאן זה היה scale x, זאת התכונה שראינו שמה, ואנחנו רוצים להגיד לו תקשיב SA עד 1.5 float זה בי דיוק מ-1 עד 1.5 למה אנחנו לא צריכים לתת לו את ההתחלה מפני שהולך להיות לנו repeat אז בנקו הולך לחזור בחזרה

26. 10:54

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

27. 11:11

    מה עוד אנחנו רוצים לתת ל-Scale X Animator? Set Duration 1000, אנחנו רוצים לתת לו Scale X Animator נקודה Set Repeat Count 1. אנחנו ממש רוצים את אותו האפקט שהיה לנו מקודם.

28. 11:30

    scaleXAnimator.setRepeatMode יהיה animation.reverse, בדיוק כמו שעשינו, וscaleXAnimator.start, בוא תתחיל. עכשיו אנחנו צריכים את כל זה לשכפל, ל-scaleYAnimator, נעתיק ונדביק במקום כל אלה, ואנחנו רוצים לרוץ על Scale Y אבל הוא היה בדוגמה המקורית 2 מ-1 עד 2 וגם כן היה שם ריברס

29. 12:16

    בואו ניפטר מכל השורות האלה, בואו נריץ ואנחנו הולכים ללחוץ על הלחצן ולראות ממש את אותו אפקט שהיה לנו מקודם יש לנו Scaling, שינוי של המת המידה, 2 על ציר Y ו1.5 על ציר X, ולכן לגובה הוא גדל טיפה יותר מלרוחב, והצלחנו לבצע את זה על ידי Object Animator.

30. 12:44

    מה אנחנו צריכים לעשות? ב-Translate, בואו נבנה שוב פעם Object Animator, ואנחנו רוצים הפעם Translate Animator, ואנחנו רוצים ללכת ולשנות תכונת translate, בואו נראה איזה תכונת translate קיימת לנו כאן translate O, הנה יש לנו פה translate X ויש לנו פה translate Y translate Z זה כמובן כאילו תלת מימד

31. 13:14

    על ציר Z, אין לנו כרגע את זה בתמונה אז אנחנו שוב פעם צריכים לבצע שני אובייקטים של Object Animator נקרא לו Translate X Animator, התכונה הזאת היא ספציפית היא גם כן Of Float, Object Animator Of Float, וניתן את ה-Image View, התכונה שאנחנו רוצים, Translate, סליחה, זה לא היה Translate,

32. 13:47

    בואו נראה מה זה היה שם, Translation X, טעות שלי, בואו נעתיק Translation X ונדביק,