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

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

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

1. 00:02

   שלום וברוכים הבאים אנחנו רוצים לדבר היום על אנימציות ואנחנו נרצה לדבר על כך גם במפגשים הבאים אנחנו נתחיל כמובן באופן הדרגתי ונתקדם הלאה בואו נפתח בלייצר פרויקט חדש אז אנחנו ב-Xcode File New Project אנחנו נבחר ב-Single V Application ונלחץ פה על Next נקרא לפרויקט שלנו נניח Animations Demo

2. 00:27

   animations ואנחנו רוצים לייצר אותו בתיקייה הרגילה שלנו ו-create עכשיו כדי שהפרויקט הזה יהיה מעניין אז אנחנו צריכים להוסיף אליו תנועה וצבע אנחנו נעשה את זה על ידי הוספת כל מיני תמונות אני אשתמש שוב פעם בתוכנה icons 8 כדי להוסיף תמונות בוא ננסה לראות מה יש לנו כאן

3. 00:51

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

4. 01:24

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

5. 01:48

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

6. 02:01

   בואו נתחיל בצורה פשוטה, כמו שאמרתי, בצורה הדרגתית. הנה יש לנו פה ככה View Controller, בואו נוסיף אליו Image View. אתם יודעים ש-Image View, למען האמת, הוא לא כל כך User Interaction Enabled, מה זה אומר?

7. 02:18

   זה אומר שאם אני עכשיו גורר פה Image View, אני לא יכול לזהות עליו Touch Events, אוקיי? בואו, אל תגררו שנייה את ה-Image View, אני אראה לכם משהו מעניין. אני שמתי פה Image View, אני מנסה לגרור Action, ווואו, אין אפשרות כזאת, אוקיי? אז אם אתם רוצים לעשות User Interaction מראש, אתם רוצים שילחצו על התמונה ויקרה משהו, אז אולי לא כדאי לבחור ב-Image View. אפשר

8. 02:43

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

9. 03:08

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

10. 03:16

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

11. 03:29

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

12. 03:50

    בואו נפתח את ה-assistant editor עכשיו, ואנחנו יכולים לגרור אקשן, אוקיי? בוא נראה. אז אנחנו נגרור אקשן, נניח tapped clown, או פשוט clown, ואני ארצה שהטייפ של הפקאד יהיה בטון, והנה tap event כרגיל.

13. 04:16

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

14. 04:42

    הפרמטר הראשון זה ה-Time Interval, זה כמה זמן אנחנו רוצים שהאנימציה תימשך. אז בוא נגיד שאנחנו רוצים את האנימציה לא ארוכה במיוחד, נגיד 0.78. זה די ארוך, 0.4 זה קצר ונחמד, אבל אנחנו רוצים להדגיש את האנימציה אז נתתי פה את הזמן הזה.

15. 05:04

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

16. 05:19

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

17. 05:40

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

18. 06:09

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

19. 06:37

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

20. 07:08

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

21. 07:20

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

22. 08:05

    עושים על ידי שינוי אלפא בואו נבדוק, sender נקודה alpha שווה ל-0.