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

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

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

1. 00:02

   אנחנו רוצים להסתכל היום על view property animators שמאפשרים לנו בעצם אנימציות אינטראקטיביות כמו שאתם יכולים לראות בפרויקט שלפניכם אז בואו נתחיל ונייצר לנו פרויקט חדש אנחנו נרצה לקרוא לפרויקט view property animator scrubbing שזה בעצם מה שאנחנו עושים פה בפרויקט property animator scrubbing ובואו נשים את הפרויקט הזה בתיקיית הקורס

2. 00:27

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

3. 00:56

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

4. 01:17

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

5. 01:31

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

6. 01:53

   מערך של אילוצים, יפה ובמערך הזה אנחנו מייצרים את האילוצים שלנו האילוץ הראשון, אני ארצה לקבע את ה-top n-core של הסליידר שלי אז slider.top n-core.constraint = n-core של ה-top של ה-safe area שלנו, בסדר?

7. 02:14

   view.safearea.top-ncore אז top-to-top האילוץ הזה נקרא נכון סליידר top-to-safe-layout-guide.top ובואו ניקח לעצמנו פה איזשהו מרג'ינס של 32 זה האילוץ הראשון הצמדתי את הסליידר לחלק העליון של המסך דבר שני אנחנו נרצה לקבוע משהו לגבי הרוחב של הסליידר אז בואו נאמר שאנחנו

8. 02:42

   נרצה שהסליידר שלנו יהיה רחב כרוחב המסך אז Width Anchor Constraint = 2 רוחב המסך עכשיו פה אני אקח לעצמי לא קונסטנט אלא מולטיפלייר רגע הנה אני אקח פה את האופציה הזאת ואנחנו בעצם רוצים להיות Equal to ה-view שלנו נקודה Width Anchor כפול 0.8 אז

9. 03:18

   רוחב המסך מינוס 20% והאמת היא שאני לא רוצה קונסטנט אז אני יכול לשים פה 0 או פשוט האמת היא להוריד את הפרמטר הזה לחלוטין זאת גם אפשרות יפה אז הנה שני אילוצים כבר הרוחב שלו שווה לרוחב המסך כפול מינוס 20% ואילצנו את הטופ האילוץ האחרון לסליידר אנחנו נרצה פשוט לשים אותו במרכז אז slider.CenterX.Encore.Constraint = 2.View.CenterX.Encore

10. 03:54

    והאמת היא שאני לא רוצה קונסטנט אני רוצה אותו בדיוק בדיוק במרכז בואו בואו נבדוק נראה איך הסליידר שלנו בעצם אם יש סליידר ואם הצלחנו להוסיף אותו מהקוד רק לשם כך נקרא ל-init ui קודם אז נפעיל את הפעולה שלנו ואנחנו רוצים מצפים לראות סליידר בחלק העליון פלוס 32 בציר x הוא אמור להיות

11. 04:19

    באמצע יפה אז הנה הסליידר מעולה יפה עכשיו מה אנחנו צריכים לייצר נכון את הקופסה הוורודה אז let pink box שווה בעצם ל-uivu חדש זה פשוט view שוב עוד פעם אנחנו לא רוצים אילוצים אוטומטיים אז דבר ראשון pinkbox.translate = false ואנחנו נרצה להוסיף כרגיל את ה-view שלנו את ה-pinkbox כ-subview יפה עכשיו על מנת

12. 04:52

    שהדבר הזה יהיה pinkbox בוא ניתן לזה צבע אז background יהיה שווה לאיזשהו צבע בוא נעשה color literal ונבחר פה צבע נחמד אוקיי אני אעשה פה other ונבחר צבע באמת נחמד שאני רוצה ככה משהו כזה יפה מאוד אז יש לנו view הוספנו אותו כבר כ-subview אמרנו לו שלא יעשה לבד את האילוצים אז מה

13. 05:22

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

14. 05:54

    אז with constraint = 2 אנחנו נרצה פשוט קונסטנט של 100. זה אומר רוחב 100. עכשיו אני אעתיק ואדביק את האילוץ, רק אני משנה את זה לheightncore ועכשיו בעצם יש לי קופסה ברוחב וגובה של 100 על 100. יש פה פסיק בשביל שזה כמובן מערך והאילוץ הבא שלנו בוא נשים את זה בדיוק באמצע אוקיי אז ציר y אנחנו רוצים שזה יהיה באמצע אז אם ככה

15. 06:26

    pinkbox.centery.ncore.constraint = 2 אנחנו רוצים שזה יהיה בדיוק באמצע של ה-safe area אז self.pשוטview.safe area.center יפה אז הוא אמור להיות במרכז האמת היא אני לא רוצה להוסיף לזה כרגע קבוע אז הוא יהיה במרכז של ציר y center y יפה מה לגבי ציר x אנחנו נרצה לשים את השמאל שלו בצד שמאל של המסך, אם אתם זוכרים מהדוגמה שראינו קודם, אז

16. 07:14

    השמאל של הפקד היה פה בצד שמאל, אוקיי? אז זה מה שאנחנו רוצים, pinkbox.left.ncore.constraint.equal2.view. safelyoutguide.left.ncore, והפעם אנחנו נרצה כמובן להוסיף איזשהו קבוע, למשל פלוס 32, כדי שלא יהיה צמוד מדי, שיתפקד כשוליים.

17. 07:42

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

18. 07:57

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

19. 08:10

    עכשיו, מה לגבי האנימציה, מה לגבי ה-View Property Animator? אנחנו קודם כל הטייפ נקרא UIViewPropertyAnimator בואו נגדיר אותו ברמת המחלקה כדי שהוא יהיה נגיש לנו מכל מקום אז let Animator אנחנו נאמר שהוא מטייפ של UIViewPropertyAnimator ואנחנו נרצה

20. 08:32

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

21. 08:59

    של האנימטור אז אנימטור שווה UIViewPropertyAnimator חדש ואנחנו יכולים לבחור פה ב-Duration וב-Curve למשל אנחנו נבחר ב-Duration די ארוך של שתי שניות כדי לחצות את כל המסך ה-Curve הנבחר מאחד ה-Curves המוכנים למשל אנחנו ניקח את איזין-אאוט. איזין-אאוט זה מתחיל ככה מהר ומסתיים

22. 09:32

    לאט. הנה, כתוב לנו כאן, בסדר? מתחיל, סליחה, לאט, ביגין סלואולי, מאיץ באמצע ובסוף הוא מאט. איזין-אאוט.

23. 09:47

    עכשיו, לגבי האנימציות אז אנחנו ניתן פה enter כי זה בעצם בלוק של אנימציות וכל מה שידענו לעשות קודם אנחנו נעשה כאן, אוקיי? למעשה אין הרבה הבדל בקטע הזה בין UIView Animations ל-UIView Property Animator.

24. 10:02

    ההבדל המשמעותי הוא שב-UIFU פרופרטי אנימטור