1
00:00:01,109 --> 00:00:03,193
יש הרבה דרכים ליצור אנימציה (להנפיש)

2
00:00:03,193 --> 00:00:05,241
אבל העיקרון הבסיסי הוא אותו הדבר

3
00:00:05,241 --> 00:00:07,132
אם תקחו כמה תמונות או ציורים

4
00:00:07,132 --> 00:00:09,726
שכל אחד מהם שונה במעט מהקודם

5
00:00:09,726 --> 00:00:11,462
ותעלעלו בהם מספיק מהר

6
00:00:11,462 --> 00:00:13,267
זה ייראה כאילו התמונה זז.

7
00:00:13,267 --> 00:00:16,167
בימים הישנים והטובים, היו מציירים את כל התמונות האלו ביד.

8
00:00:16,167 --> 00:00:19,696
וזה היה לוקח <b>מלא</b> זמן לעשות סרטון קצר של שלוש שניות של אנימציה.

9
00:00:19,696 --> 00:00:22,877
למזלנו, אנחנו חיים בעתיד :)

10
00:00:22,877 --> 00:00:26,130
וזה למעשה די קל ליצור אנימציה פשוטה עם קוד.

11
00:00:26,130 --> 00:00:27,998
אני אראה לכם איך!

12
00:00:27,998 --> 00:00:31,468
בצד ימין, אתם יכולים לראות את הרכב החמוד והקטן שלנו עם רקע צהוב.

13
00:00:31,468 --> 00:00:34,965
וכן, אני עיצבתי את הרקע הזה בעצמי, תודה.

14
00:00:34,965 --> 00:00:38,575
בכל אופן, כאן אתם יכולים לראות שאנחנו מגדירים את זה הרקע היפייפה הזה

15
00:00:38,575 --> 00:00:42,531
ולמכונית אין קווי מתאר, שאת זה עשינו את פונקציית ()noStroke.

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

17
00:00:47,471 --> 00:00:49,456
ואתם יכולים לראות שאם נשנה את הערך כאן

18
00:00:49,456 --> 00:00:52,105
אז הרכב יזוז קדימה ואחורה.

19
00:00:52,105 --> 00:00:53,531
נביא אותו חזרה ל-10.

20
00:00:53,531 --> 00:00:57,594
כאן אנחנו מגדירים את צבע המילוי של הרכב ומציירים את שני הריבועים שמהווים את הרכב עצמו.

21
00:00:57,594 --> 00:01:00,063
שימו לב, המלבן הראשון הזה הוא עבור החלק התחתון

22
00:01:00,063 --> 00:01:02,483
והמלבן הזה האו עבור החלק העליון.

23
00:01:02,483 --> 00:01:05,027
ואז אנחנו עושים את אותו הדבר עבור הגלגלים

24
00:01:05,027 --> 00:01:06,979
נגדיר את צבע המילוי ונצייר את שתי האליפסות

25
00:01:06,979 --> 00:01:08,648
אחת ב-x + 25

26
00:01:08,648 --> 00:01:10,191
ואחת ב- x + 75

27
00:01:10,191 --> 00:01:12,828
עכשיו אנחנו מגיעים לחלק החדש,

28
00:01:12,828 --> 00:01:15,169
מה שיש לנו כאן נקרא הגדרת הפונקציה

29
00:01:15,169 --> 00:01:16,691
תלמדו על זה יותר מאוחר.

30
00:01:16,691 --> 00:01:19,566
כרגע, פשוט תסתכלו על זה ותזכרו איך זה נראה.

31
00:01:19,566 --> 00:01:24,292
הדבר החשוב לשים אליו לב הוא המילה הזו ״draw״ והסוגריים האלו.

32
00:01:24,292 --> 00:01:25,190
הסוגר הפותח כאן

33
00:01:25,190 --> 00:01:26,750
והסוגר שמסמן את הסוף כאן

34
00:01:26,750 --> 00:01:30,530
לכל זה אנחנו קוראים לולאת הציור, או לולאת האנימציה (לולאת ההנפשה)

35
00:01:30,530 --> 00:01:35,295
וכל מה שתשימו בתוך הסוגריים האלו ירוץ שוב ושוב ושוב ממש ממש מהר.

36
00:01:35,295 --> 00:01:36,702
ולכן זה נקרא לולאה.

37
00:01:36,702 --> 00:01:41,792
וכל דבר מחוץ ללולאה הזו מורץ פעם אחת בלבד רק בתחילת התוכנה.

38
00:01:41,792 --> 00:01:45,529
אז הצעד הראשון באנימציה הוא להעביר את כל הקוד שלכם לתוך הסוגריים האלו

39
00:01:45,529 --> 00:01:47,833
כך שהתמונה שלכם תצוייר שוב ושוב.

40
00:01:47,833 --> 00:01:51,661
אז בואו נעשה את זה. אני הולכת לקחת את כל קוד הציור הזה.

41
00:01:51,661 --> 00:01:54,261
ואז לשים אותו פה בתוך הלולאה שלי.

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

43
00:02:02,471 --> 00:02:05,746
ועכשיו אני יודעת שהקוד הזה בתוך הסוגריים.

44
00:02:05,746 --> 00:02:10,208
כמו שאתם רואים הכל נשאר אותו הדבר, כלום לא השתנה.

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

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

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

48
00:02:28,213 --> 00:02:31,151
כלום לא השתנה, אז דה, אתם לא הולכים לראות שום אנימציה.

49
00:02:31,151 --> 00:02:34,660
זה בסך הכל מצייר את אותם ריבועים ואליפסות שוב על גבי הישנים.

50
00:02:34,660 --> 00:02:40,395
זכרו מה שאמרנו: אם אתם רוצים ליצור אנימציה, אתם צריכים לשנות משהו קטן בכל פעם.

51
00:02:40,395 --> 00:02:42,761
אז אם אני רוצה שהמכונית שלי למשל תזוז קדימה

52
00:02:42,761 --> 00:02:45,361
כדאי שאני אשנה את הערך המשתנה x נכון?

53
00:02:45,361 --> 00:02:48,052
אז כן, בואו פשוט נעשה את זה...11

54
00:02:48,052 --> 00:02:51,117
אה!! לא! אבל עכשיו זה הולך להיות 11 בכל פעם ופעם.

55
00:02:51,117 --> 00:02:57,564
איך לעזאזל אני אמורה לגרום לערך של x להשתנות בזמן שהמחשב מריץ את הקוד שוב ושוב?

56
00:02:57,564 --> 00:02:59,707
אוקיי, שימו לב לטריק הקסום הבא:

57
00:02:59,707 --> 00:03:02,789
זוכרים ש-"var x" יוצר משתנה חדש?

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

59
00:03:08,061 --> 00:03:13,467
מה שאנחנו לעשות הוא לקחת את המשתנה הזה ולהוציא אותו מלולאת הציור. ככה הוא ייצור אותו רק פעם אחת.

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

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

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

63
00:03:38,291 --> 00:03:41,757
זה תמיד יהיה 11, אבל הנה איפה שהקסם נכנס לפעולה.

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

65
00:03:52,984 --> 00:03:54,931
יאי! זה עובד!

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

67
00:04:02,823 --> 00:04:07,147
כך שזה מצייר את המכונית שוב ושוב, אבל ניתן לראות את כל המכוניות שמתחת למכונית החדשה.

68
00:04:07,147 --> 00:04:12,190
אז אני אשים את שורת הקוד הזו בראש הלולאה, ככה,

69
00:04:12,190 --> 00:04:15,984
ואלחץ ״אתחל״ בשביל שאוכל לראות את המכונית שלי שוב...

70
00:04:15,984 --> 00:04:18,269
יאי! זה כל כך מושלם!

71
00:04:18,269 --> 00:04:22,386
ואם רצינו לגרום למכונית לנסוע מהר יותר, נוכל פשוט לשנות את x במעט יותר בכל פעם.

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

73
00:04:28,862 --> 00:04:34,552
הנה זה בא! נעשה את זה חיובי שוב, אופס, הנה זה הולך.

74
00:04:34,552 --> 00:04:36,550
אז הנה הדברים החשובים שצריך לזכור:

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

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

77
00:04:52,015 --> 00:04:55,854
ואז בתוך הלולאה, כאן, נשנה את המשתנה במעט בכל פעם

78
00:04:55,854 --> 00:05:02,315
בדרך כלל על ידי השמה של הערך הקודם שלו ועוד מספר כלשהו או פחות מספר כלשהו.

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

80
00:05:07,934 --> 99:59:59,999
וזהו! בהצלחה!