PracticU

הוספת אנימציה ל-Dialog

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאייפון iPhone iOS - ב-Swift-Xcode › הוספת אנימציה ל-Dialog
מילון מושגים:
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
View - רכיב שאחראי על הצגת המידע למשתמש (התצוגה) בדפוס MVC. גם טבלה וירטואלית מבוססת שאילתה במסד נתונים.
קומפיילר - תוכנה שממירה קוד מקור שנכתב בשפת תכנות לקוד שהמחשב יכול להריץ, ומדווחת על שגיאות תחביר.
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.

הוספת אנימציה ל-Dialog
הדיאלוג מהשיעור הקודם מופיע ונעלם בלי אנימציה. בשיעור הזה מוסיפים לו כניסה מלמעלה ויציאה בהדרגה, בעזרת UIView.animate בצורה בסיסית.
השלבים העיקריים
1. תנאי פתיחה: לפני האנימציה הדיאלוג מוצב מחוץ למסך: מרכזו האופקי נשאר באמצע, ומרכזו האנכי נמצא במינוס גובה המסך, כך שהוא נכנס מלמעלה.
2. UIView.animate: הפונקציה מקבלת משך זמן של 0.4 שניות ובלוק שבו משנים את center לאמצע המסך. בתוך הבלוק פונים ל-self.view.
3. אזהרה על self: הקומפיילר מזהיר על שימוש ב-self בתוך closure, כי ה-closure מחזיק רפרנס לאובייקט. ההערה לא מונעת את הפעולה, והנושא יילמד בהמשך.
4. יציאה באנימציה: בסגירה מתבצעת אנימציה דומה, ובסיומה (completion) מסירים את הדיאלוג מה-superview.
5. אפשרויות נוספות: אפשר לשנות גם את ה-frame או את הגודל כדי לקבל אפקטים מתקדמים.
שימו לב
ההסרה מה-superview חייבת להתבצע בסיום האנימציה, ולכן היא נמצאת בתוך ה-completion.
הדיאלוג נכנס ויוצא באנימציה פשוטה, וכך מתחילים להכיר את UIView.animate.
השיעור הבא בקורס: יצירת Seperate Modal Storyboard

פרקי ההרצאה: הוספת אנימציה ל-Dialog

  1. 00:00

    מטרה: אנימציית כניסה ויציאה לדיאלוג

  2. 00:40

    תנאי התחלה: הדיאלוג מחוץ למסך

  3. 01:54

    UIView.animate לכניסה למרכז

  4. 04:04

    אנימציית יציאה של הדיאלוג

תמלול ההרצאה: הוספת אנימציה ל-Dialog

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

  1. 00:03

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

  2. 00:27

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

  3. 00:59

    שהוא לא סנטר אז אנחנו נקבע נניח x וy כלשהם לגבי ציר X, אין לי שום בעיה שהוא יהיה באמצע. אז ה-self.view.center נשמע מצוין, כמו קודם כזה.

  4. 01:16

    לגבי Y לעומת זאת, אז אנחנו רוצים להעיף אותו מחוץ למסך. אז אנחנו רוצים שהוא יהיה ב-center, סליחה, center X. עכשיו, לגבי Y, אני רוצה להעיף אותו מחוץ למסך, אז בואו נגיד שהוא יהיה ב-self.view.frame נניח, נקודה-height.

  5. 01:36

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

  6. 01:51

    אז אלה תנאי הפתיחה. אוקיי, עכשיו, זה בעצם התנאי סיור. אז אם אני פשוט אריץ את השורת סיור באנימציה, כדי לעשות את זה באנימציה, אז אנחנו משתמשים בפעולה הבאה, ui-view.animate.

  7. 02:07

    זאת בעצם פעולה סטטית על המחלקה ui-view, והפעולה היא נקראת U of U אנימט וויו דיוריישן אז הדיוריישן יהיה איזשהו זמן לאנימציה, נגיד 0.4 שניות.

  8. 02:19

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

  9. 02:36

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

  10. 02:56

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

  11. 03:16

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

  12. 03:39

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

  13. 03:56

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

  14. 04:14

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

  15. 04:28

    אני אשתמש עוד פעם בקוד שהיה קודם. נעשה ככה, מחקתי פה שורה, ראיתם? יש פה את ה-dialog-view-remove, מחקתי אותה. אני אארגן פה אנימציה UIView.animate with Duration and Completion.

  16. 04:41

    עכשיו ה-Duration עוד פעם 0.4, אנימציות זה בלוק אז אני עושה Enter ואני אכתוב פה עוד מעט את הקוד קומפלישן הפעם, אני לא רוצה למחוק אותו, אז הקומפלישן הפעם זה בלוק, אני עושה Enter, וסוף סוף אנחנו רואים שימוש בקומפלישן בלוק.

  17. 04:58

    הבוליאני הזה, בוא נקרא לו done, אין לנו שימוש בבוליאני, ופה יש לי קוד שקורא מתי שהנימצא מסתיימת, code that runs when the animation is over,

לקורס המלא: קורס פיתוח אפליקציות לאייפון

ההרצאה הקודמת: הסבר על Custom Dialogs

ההרצאה הבאה: יצירת Seperate Modal Storyboard

הרצאות קשורות מקורסים אחרים

  • Alert Dialog
  • הוספת VMkernel
  • תיבות דו-שיח - Build-In Dialog Boxes
  • הוספת Request לטסט

קורסים נוספים במסלול

  • קורס יסודות התכנות - שפת JAVA - קורס ג'אווה למתחילים
  • קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA
  • קורס פלאטר - Flutter - שפת DART של גוגל למובייל - פיתוח אפליקציות לאנדרואיד ואייפון
  • קורס PhoneGap - פיתוח אפליקציות לאנדרואיד ואייפון