WEBVTT

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

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

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

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

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

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

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

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

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

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

00:00:26.130 --> 00:00:27.998
אני אראה לכם איך!

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

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

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

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

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

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

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

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

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

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

00:01:00.063 --> 00:01:02.483
והמלבן הזה האו עבור החלק העליון.

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

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

00:01:06.979 --> 00:01:08.648
אחת ב-x + 25

00:01:08.648 --> 00:01:10.191
ואחת ב- x + 75

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

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

00:01:15.169 --> 00:01:16.691
תלמדו על זה יותר מאוחר.

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

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

00:01:24.292 --> 00:01:25.190
הסוגר הפותח כאן

00:01:25.190 --> 00:01:26.750
והסוגר שמסמן את הסוף כאן

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

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

00:01:35.295 --> 00:01:36.702
ולכן זה נקרא לולאה.

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

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

00:01:45.529 --> 00:01:47.833
כך שהתמונה שלכם תצוייר שוב ושוב.

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

00:01:51.661 --> 00:01:54.261
ואז לשים אותו פה בתוך הלולאה שלי.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

00:03:52.984 --> 00:03:54.931
יאי! זה עובד!

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

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

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

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

00:04:15.984 --> 00:04:18.269
יאי! זה כל כך מושלם!

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

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

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

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

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

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

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

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

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

00:05:07.934 --> 99:59:59.999
וזהו! בהצלחה!