0:00:01.109,0:00:03.193
יש הרבה דרכים ליצור אנימציה (להנפיש)

0:00:03.193,0:00:05.241
אבל העיקרון הבסיסי הוא אותו הדבר

0:00:05.241,0:00:07.132
אם תקחו כמה תמונות או ציורים

0:00:07.132,0:00:09.726
שכל אחד מהם שונה במעט מהקודם

0:00:09.726,0:00:11.462
ותעלעלו בהם מספיק מהר

0:00:11.462,0:00:13.267
זה ייראה כאילו התמונה זז.

0:00:13.267,0:00:16.167
בימים הישנים והטובים, היו מציירים את כל התמונות האלו ביד.

0:00:16.167,0:00:19.696
וזה היה לוקח <b>מלא</b> זמן לעשות סרטון קצר של שלוש שניות של אנימציה.

0:00:19.696,0:00:22.877
למזלנו, אנחנו חיים בעתיד :)

0:00:22.877,0:00:26.130
וזה למעשה די קל ליצור אנימציה פשוטה עם קוד.

0:00:26.130,0:00:27.998
אני אראה לכם איך!

0:00:27.998,0:00:31.468
בצד ימין, אתם יכולים לראות את הרכב החמוד והקטן שלנו עם רקע צהוב.

0:00:31.468,0:00:34.965
וכן, אני עיצבתי את הרקע הזה בעצמי, תודה.

0:00:34.965,0:00:38.575
בכל אופן, כאן אתם יכולים לראות שאנחנו מגדירים את זה הרקע היפייפה הזה

0:00:38.575,0:00:42.531
ולמכונית אין קווי מתאר, שאת זה עשינו את פונקציית ()noStroke.

0:00:42.531,0:00:47.471
כאן אתם יכולים לראות שאנחנו מכריזים על משתנה חדש ״x״, המיקום של הרכב, ונותנים לו את הערך 10

0:00:47.471,0:00:49.456
ואתם יכולים לראות שאם נשנה את הערך כאן

0:00:49.456,0:00:52.105
אז הרכב יזוז קדימה ואחורה.

0:00:52.105,0:00:53.531
נביא אותו חזרה ל-10.

0:00:53.531,0:00:57.594
כאן אנחנו מגדירים את צבע המילוי של הרכב ומציירים את שני הריבועים שמהווים את הרכב עצמו.

0:00:57.594,0:01:00.063
שימו לב, המלבן הראשון הזה הוא עבור החלק התחתון

0:01:00.063,0:01:02.483
והמלבן הזה האו עבור החלק העליון.

0:01:02.483,0:01:05.027
ואז אנחנו עושים את אותו הדבר עבור הגלגלים

0:01:05.027,0:01:06.979
נגדיר את צבע המילוי ונצייר את שתי האליפסות

0:01:06.979,0:01:08.648
אחת ב-x + 25

0:01:08.648,0:01:10.191
ואחת ב- x + 75

0:01:10.191,0:01:12.828
עכשיו אנחנו מגיעים לחלק החדש,

0:01:12.828,0:01:15.169
מה שיש לנו כאן נקרא הגדרת הפונקציה

0:01:15.169,0:01:16.691
תלמדו על זה יותר מאוחר.

0:01:16.691,0:01:19.566
כרגע, פשוט תסתכלו על זה ותזכרו איך זה נראה.

0:01:19.566,0:01:24.292
הדבר החשוב לשים אליו לב הוא המילה הזו ״draw״ והסוגריים האלו.

0:01:24.292,0:01:25.190
הסוגר הפותח כאן

0:01:25.190,0:01:26.750
והסוגר שמסמן את הסוף כאן

0:01:26.750,0:01:30.530
לכל זה אנחנו קוראים לולאת הציור, או לולאת האנימציה (לולאת ההנפשה)

0:01:30.530,0:01:35.295
וכל מה שתשימו בתוך הסוגריים האלו ירוץ שוב ושוב ושוב ממש ממש מהר.

0:01:35.295,0:01:36.702
ולכן זה נקרא לולאה.

0:01:36.702,0:01:41.792
וכל דבר מחוץ ללולאה הזו מורץ פעם אחת בלבד רק בתחילת התוכנה.

0:01:41.792,0:01:45.529
אז הצעד הראשון באנימציה הוא להעביר את כל הקוד שלכם לתוך הסוגריים האלו

0:01:45.529,0:01:47.833
כך שהתמונה שלכם תצוייר שוב ושוב.

0:01:47.833,0:01:51.661
אז בואו נעשה את זה. אני הולכת לקחת את כל קוד הציור הזה.

0:01:51.661,0:01:54.261
ואז לשים אותו פה בתוך הלולאה שלי.

0:01:54.261,0:02:02.471
ועל מנת להזכיר לעצמי שבלוק הקוד הזה בתוך הלולאה, אני הולכת לסדר את הכניסה של הטקסט על ידי בחירה של הטקסט ולחיצה על TAB

0:02:02.471,0:02:05.746
ועכשיו אני יודעת שהקוד הזה בתוך הסוגריים.

0:02:05.746,0:02:10.208
כמו שאתם רואים הכל נשאר אותו הדבר, כלום לא השתנה.

0:02:10.208,0:02:17.788
מכיוון שבפעם הראשונה שנריץ את לולאת הציור, המחשב יגיד משהו כמו ״אוקיי, אני אעשה משתנה חדש בשם x, אכוון אותו ל-10, אצייר שני ריבועים, אצייר שתי אליפסות״.

0:02:17.788,0:02:24.289
ואז הוא הולך בחזרה להתחלה ואומר לעצמו ״אוקיי, אני אעשה משתנה חדש בשם x, אכוון אותו ל-10, אצייר שני ריבועים, אצייר שתי אליפסות״.

0:02:24.289,0:02:28.213
ואז, ״אוקיי, אני אעשה משתנה חדש בשם x, אכוון אותו ל-10, אצייר שני ריבועים...״ בדיוק אותו הדבר.

0:02:28.213,0:02:31.151
כלום לא השתנה, אז דה, אתם לא הולכים לראות שום אנימציה.

0:02:31.151,0:02:34.660
זה בסך הכל מצייר את אותם ריבועים ואליפסות שוב על גבי הישנים.

0:02:34.660,0:02:40.395
זכרו מה שאמרנו: אם אתם רוצים ליצור אנימציה, אתם צריכים לשנות משהו קטן בכל פעם.

0:02:40.395,0:02:42.761
אז אם אני רוצה שהמכונית שלי למשל תזוז קדימה

0:02:42.761,0:02:45.361
כדאי שאני אשנה את הערך המשתנה x נכון?

0:02:45.361,0:02:48.052
אז כן, בואו פשוט נעשה את זה...11

0:02:48.052,0:02:51.117
אה!! לא! אבל עכשיו זה הולך להיות 11 בכל פעם ופעם.

0:02:51.117,0:02:57.564
איך לעזאזל אני אמורה לגרום לערך של x להשתנות בזמן שהמחשב מריץ את הקוד שוב ושוב?

0:02:57.564,0:02:59.707
אוקיי, שימו לב לטריק הקסום הבא:

0:02:59.707,0:03:02.789
זוכרים ש-"var x" יוצר משתנה חדש?

0:03:02.789,0:03:08.061
כשזה נמצא בתוך לולאת הציור, זה יוצר משתנה חדש ״x״ חדש בכל פעם.

0:03:08.061,0:03:13.467
מה שאנחנו לעשות הוא לקחת את המשתנה הזה ולהוציא אותו מלולאת הציור. ככה הוא ייצור אותו רק פעם אחת.

0:03:13.467,0:03:22.770
ואז, בכל פעם שהמחשב יריץ את הקוד הזה וייראה את המשתנה x, הוא יישתמש באותו ערך של המשתנה ממקודם

0:03:22.770,0:03:31.295
אז אני פשוט הולכת לעשות את זה, אני הולכת לקחת את המשתנה הזה ולשים אותו מחוץ ללולאת הציור כך שהוא ייווצר רק פעם אחת.

0:03:31.295,0:03:38.291
ובכל פעם שהמחשב ייתקל במשתנה x הוא יישתמש באותו ערך ששמנו בו מקודם. כרגע, הערך האחרון שהכנסנו לו הוא ״11״.

0:03:38.291,0:03:41.757
זה תמיד יהיה 11, אבל הנה איפה שהקסם נכנס לפעולה.

0:03:41.757,0:03:52.984
איפשהו בתוך לולאת הציור, אנחנו הולכים לשנות את הערך של x כך שהוא ייגדל במקצת מערכו הקודם, נניח כך: x יקבל את הערך הקודם של x פלוס, בואו נגיד, 1.

0:03:52.984,0:03:54.931
יאי! זה עובד!

0:03:54.931,0:04:02.823
חוצמזה ש... אה.. זה קצת מרוח. ואם אתם תוהים למה זה נראה ככה, זה בגלל ששכחנו לצייר את הרקע הזה בתוך לולאת הציור.

0:04:02.823,0:04:07.147
כך שזה מצייר את המכונית שוב ושוב, אבל ניתן לראות את כל המכוניות שמתחת למכונית החדשה.

0:04:07.147,0:04:12.190
אז אני אשים את שורת הקוד הזו בראש הלולאה, ככה,

0:04:12.190,0:04:15.984
ואלחץ ״אתחל״ בשביל שאוכל לראות את המכונית שלי שוב...

0:04:15.984,0:04:18.269
יאי! זה כל כך מושלם!

0:04:18.269,0:04:22.386
ואם רצינו לגרום למכונית לנסוע מהר יותר, נוכל פשוט לשנות את x במעט יותר בכל פעם.

0:04:22.386,0:04:28.862
אם נגדיל אותו בכל פעם ב-10 נניח, ואוו, זה ממש עף מהמסך! ואני יכולה גם לעשות את הערך שלילי, נגיד  x - 10, ואז...

0:04:28.862,0:04:34.552
הנה זה בא! נעשה את זה חיובי שוב, אופס, הנה זה הולך.

0:04:34.552,0:04:36.550
אז הנה הדברים החשובים שצריך לזכור:

0:04:36.550,0:04:43.513
הדבר הזה כאן נקרא לולאת הציור. אתם צריכים לשים את קוד הציור שלכם כאן בפנים, בתוך הלולאה הזו על מנת שהוא יצוייר שוב ושוב.

0:04:43.513,0:04:52.015
ואז, אתם רוצים ליצור משתנה מחוץ ללולאת הציור שלכם. זה סופר חשוב להגדיר את המשתנה מחוץ ללולאה על מנת שנוכל להשתמש באותו אחד בכל פעם שנריץ את הקוד.

0:04:52.015,0:04:55.854
ואז בתוך הלולאה, כאן, נשנה את המשתנה במעט בכל פעם

0:04:55.854,0:05:02.315
בדרך כלל על ידי השמה של הערך הקודם שלו ועוד מספר כלשהו או פחות מספר כלשהו.

0:05:02.315,0:05:07.934
ולבסוף, נשתמש במשתנה איפשהו בתוך קוד הציור כך שהציורים ייראו שונה בכל פעם.

0:05:07.934,9:59:59.000
וזהו! בהצלחה!