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

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

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

1. 00:02

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

2. 00:25

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

3. 00:47

   לעשות את זה, אני מייצר Collection View Controller. Collection View Controller, אז אנחנו קודם כל נייצר קלאס חדש, New File, פה על הגרופ New File, קליק ימני New File, CocoTouch קלאס שיורש מ-Collection View Controller.

4. 01:05

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

5. 01:35

   הצהוב ראינו את זה באחד השיעורים נכון ראינו מה זה קולקשן ויו קונטרולר למעשה אז הנה, יש פה תמונה כזאת. אנחנו ניתן Reuse ID, זה ה-Cell בעצם, אנחנו ניתן Reuse ID, בואו נקרא לזה נגיד Icon Cell או משהו, אוקיי? אני אזכור את השם ואני אעתיק אותו כרגע

6. 01:55

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

7. 02:04

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

8. 02:31

   זה למסגרת ועכשיו התמונה בוא נבחר נגיד בתמונה הזאת אוקיי תמונות לא נחמדות יצאו כל כך אבל בסדר בואו נתפשר על התמונה הזאת בעין אנחנו רוצים להריץ ממילא פה את כל התמונות שלנו אז אוקיי נחמד מבחינת אילוצים אנחנו נרצה לתפוס את התמונה ולהוריד את ה-Constraints to Margins ופשוט לתת קצת שוליים כדי שיהיה מסגרת לתמונה

9. 03:03

   יפה אז הנה האילוצים שלנו מצוין עכשיו אנחנו בדרך כלל נרצה לייצר אולי קלאסט ל-Cell וזאת על מנת שנוכל להחליף לו את התמונה אז אנחנו צריכים בעצם לייצר עוד קלאסט אחד בואו נייצר אותו אז New File קליק ימני על הגרופו New File עוד Coco Touch Class בואו נירש פה מ-Cell UI Collection View Cell הפעם ובוא נקרא לזה Icons

10. 03:33

    Collection View Cell ואלה כל הדברים שאנחנו צריכים בעצם כל הקבצים שהיינו צריכים פה לחלק הזה מה שכן אנחנו נרצה לשייך עכשיו את הקלאסים אז אני אתפוס את ה-Icons Cell זה ה-ID שלו אבל אני גם אשייך אותו לקלאס אז אני הולך פה ל-Identity Inspector ואני משייך את הקלאס דבר נוסף הקולקשן view אנחנו נרצה לשייך לו

11. 04:00

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

12. 04:23

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

13. 04:40

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

14. 05:01

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

15. 05:22

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

16. 05:44

    עכשיו כאן יש לנו פה איזושהי פונקציה שנקראת Collection View Cell עבור Index Puff, אוקיי? אז אם אנחנו זוכרים, אז אנחנו בעצם רוצים לדעת איזה אייקון להציג בכל אחד.

17. 05:59

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

18. 06:23

    אז אני פשוט אעשה פה Casting, אוקיי? אני אעשה את זה כבר בשלב ה-Ase, אני אעשה Casting Force, אוקיי? בואו נראה שהקומפיילר קצת נרגע, מצוין. לגבי האייקון, אנחנו יודעים של-Cell יש איזשהו Image View, עוד לא גררנו Outlet, אז אני אראה לכם טריק למקרה שאנחנו לא רוצים לגרור Outlet מאיזושהי סיבה אנחנו בעצם יודעים let i

19. 06:54

    v שהוא בעצם sell.subvue אוקיי הוא יהיה subvue שלו באיזושהי צורה וכאן אנחנו רוצים אולי לבקש where או first where v is או דולר 0 רגע אני לא יודע אם אתם מכירים את זה אז בוא נעשה ככה אנחנו נקרא לזה v בוא אני אעשה את זה בצורה שאתם יותר תבינו אוקיי עכשיו פה יש closure יפה אז הפונקציה הזו דרך אגב

20. 07:34

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

21. 07:56

    אומר v is ui image view מגניב הצלחתי למצוא את ה-Image View אף על פי שלא גררתי לו Outlet, בגלל שאני יודע שהוא Subview של Cell. אתם לא חייבים לעשות את זה, אתם לגמרי מוזמנות ומוזמנים לגרור Outlet ל-Image View ואז Cell.Image View. אני פשוט מורה לכם דרכים נוספות כדי לחזק אותנו קצת. דבר נוסף

22. 08:22

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

23. 08:45

    נקרא $0 אוקיי במקום עכשיו במקום עכשיו לקרוא לו v כלומר אם אני לא אקרא לו בשם יקרב $0 בואו תראו איזה יופי יכול לכתוב את ה-closure הזה תשימו לכם את זה בהערה או משהו בסדר אני אמחק את זה רגע ואני אכתוב משהו יותר קצר אני אכתוב $0