PracticU

אנימציה ב-Xcode-Swift - חלק 4

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

אנימציה ב-Xcode-Swift - חלק 4
השיעור ממשיך את סדרת האנימציות ב-Xcode ומראה איך מונפשים כפתור בסרגל הניווט, וכיצד מונפש שינוי של אילוץ גובה.
השלבים העיקריים
1. כפתור בסרגל הניווט: הדיאלוג נעטף ב-Navigation Controller, ומוסיפים לו Bar Button Item בצורת פלוס.
2. קבלת ה-View של הכפתור: Bar Button Item אינו UIView, לכן מקבלים את ה-view שלו בעזרת KVO: sender.value(forKey: "view"), וממירים אותו ל-UIView.
3. אנימציית סיבוב: בתוך UIView.animate מסובבים את ה-view בזווית של CGFloat.pi / 4 כשפותחים, ובזווית אפס כשסוגרים.
4. הפיכת מצב: כל לחיצה הופכת את הבוליאני shouldOpen, כך שהכפתור נפתח ונסגר לסירוגין.
5. חזרה אינסופית: האפשרויות Autoreverse ו-Repeat ביחד יוצרות חזרה אינסופית, ולכן הן לא מתאימות לאנימציה חד-פעמית.
6. אילוץ מונפש: האילוץ של הגובה מחובר כ-Outlet, ושינוי height.constant בין 150 ל-0 יוצר פתיחה וסגירה של התפריט.
שימו לב
- האפשרות repeatCount הוצאה משימוש ב-iOS 13, ולכן לא ממליצים עליה.
- שינוי אילוץ לבדו, גם בתוך בלוק האנימציה, לא יונפש. יש לקרוא ל-self.view.layoutIfNeeded() בתוך הבלוק, כדי שה-layout יתעדכן כחלק מהאנימציה.
כך מתקבל תפריט שנפתח ונסגר באנימציה חלקה, עם שליטה בכפתור ובאילוץ הגובה.
השיעור הבא בקורס: אנימציה ב-Xcode-Swift - חלק 5

פרקי ההרצאה: אנימציה ב-Xcode-Swift - חלק 4

  1. 00:00

    מטרה: אנימציה לכפתור בסרגל הכלים

  2. 00:42

    הוספת כפתור פלוס לסרגל הניווט

  3. 02:00

    הפעלת אנימציה על ה-view של הכפתור

  4. 02:40

    גישה ל-view של הכפתור דרך KVO

  5. 03:21

    סיבוב הכפתור בין פתוח לסגור

  6. 04:01

    אפשרויות האנימציה והקפיצה

  7. 05:14

    החלפת מצב הפתיחה בכל לחיצה

  8. 05:51

    חזרה אוטומטית ו-repeat

תמלול ההרצאה: אנימציה ב-Xcode-Swift - חלק 4

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

  1. 00:02

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

  2. 00:30

    הקודם ואנחנו רוצים לייצר פה תפריט אני אלך פה לצד ימין לפינה עד ל-Embed in Navigation Controller וברגע שיש לנו Navigation Controller אז יש לנו את ה-Navigation Item ובתוכו אפשר להכניס כפתורים נכון?

  3. 00:49

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

  4. 01:22

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

  5. 01:44

    אני אגרור Action בצורה הבאה ואנחנו נשנה את זה ל-Action, נשנה את זה ל-Bar-Bottom-Item ובוא נניח נקרא לזה תעגל, אוקיי? כי זה כפתור פלוס אבל תכף נראה מה אני רוצה לעשות איתו באופן אישי. הייתי רוצה להיות מסוגל לעשות אני מציע ל-Bar-Bottom-Item, אתם רואים? נניח sender נקודה משהו אנימט אבל A זה לא View,

  6. 02:13

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

  7. 02:26

    זאת בעצם הבעיה. אם אני רוצה לסובב את כל ה-view הזה בעצם, אז אולי אני יכול לעשות sender.transform? לא, רואים?

  8. 02:36

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

  9. 02:49

    סלנדר נקודה value for key, key נקרא view, ואנחנו נצטרך לעשות פה קאסטינג ל-u ה-view, ועכשיו יש לי view ביד, אוקיי? זה ה-view הזה של הפלוס בטון, ועליו אנחנו יכולים לעשות אנימציה, אז יש לנו כזה down true, האם תוראות לי down true? אני יכול להשתמש בו בעצם, אוקיי?

  10. 03:13

    לא כדאי, כדי להגדיר עוד אחד, אז בוא נגיד var open, או should open אני אקרא לזה, ואני אשים פה true, אנחנו יכולים לעשות אנימציה ui view נקודה בוא נעשה כמו קודם let angle שווה אם צריך לפתוח אז ניקח פה cg float פאי חלקי ארבע אחרת ניקח פה זווית של אפס תכף אתם תראו את האנימציה

  11. 03:46

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

  12. 04:04

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

  13. 04:26

    דיליי אני לא צריך, אני רוצה להתחיל מיד באופצ'נס אני אתחיל במערך ריק, אבל אחר כך אני אראה לכם מה זה אומר אני פותח בלוק אז enter כדי לפתוח בלוק וסלאס סלאש כדי סתם לייצר פרי הערה כאן אנחנו נקרא ל completion done וtab ועוד פעם סלאס סלאש כרגיל האנימציה תהיה לקחת את ה-v נקודת טרנספורם שווה

  14. 04:54

    cgfine transform rotate סליחה בוא נעשה ככה rotate ואנחנו ניתן את הזווית אוקיי בואו נראה מה יצא לנו מצוין נריץ האמת היא בהקומפלישן אני לא בהכרח חייב את הקומפלישן, אוקיי?

  15. 05:20

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

  16. 05:37

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

  17. 06:05

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

  18. 06:25

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

  19. 06:34

    דרך אגב, הייתה אופציה עד ממש לא מזמן של repeat count וכל מיני אופציות נוספות UIVU.set, repeat count וכל מיני דברים כאלה שאתם יכולים לראות כאן, אבל הם deprecated ב-iOS 13 ולכן אני ממש לא ממליץ ללכת לשם.

  20. 06:53

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

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

ההרצאה הקודמת: אנימציה ב-Xcode-Swift - חלק 3

ההרצאה הבאה: אנימציה ב-Xcode-Swift - חלק 5

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

  • אנימציה ראשונה שלי באנדרואיד

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

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