Return to Video

היכרות עם אנימציה

  • 0:01 - 0:03
    יש הרבה דרכים ליצור אנימציה (להנפיש)
  • 0:03 - 0:05
    אבל העיקרון הבסיסי הוא אותו הדבר
  • 0:05 - 0:07
    אם תקחו כמה תמונות או ציורים
  • 0:07 - 0:10
    שכל אחד מהם שונה במעט מהקודם
  • 0:10 - 0:11
    ותעלעלו בהם מספיק מהר
  • 0:11 - 0:13
    זה ייראה כאילו התמונה זז.
  • 0:13 - 0:16
    בימים הישנים והטובים, היו מציירים את כל התמונות האלו ביד.
  • 0:16 - 0:20
    וזה היה לוקח מלא זמן לעשות סרטון קצר של שלוש שניות של אנימציה.
  • 0:20 - 0:23
    למזלנו, אנחנו חיים בעתיד :)
  • 0:23 - 0:26
    וזה למעשה די קל ליצור אנימציה פשוטה עם קוד.
  • 0:26 - 0:28
    אני אראה לכם איך!
  • 0:28 - 0:31
    בצד ימין, אתם יכולים לראות את הרכב החמוד והקטן שלנו עם רקע צהוב.
  • 0:31 - 0:35
    וכן, אני עיצבתי את הרקע הזה בעצמי, תודה.
  • 0:35 - 0:39
    בכל אופן, כאן אתם יכולים לראות שאנחנו מגדירים את זה הרקע היפייפה הזה
  • 0:39 - 0:43
    ולמכונית אין קווי מתאר, שאת זה עשינו את פונקציית ()noStroke.
  • 0:43 - 0:47
    כאן אתם יכולים לראות שאנחנו מכריזים על משתנה חדש ״x״, המיקום של הרכב, ונותנים לו את הערך 10
  • 0:47 - 0:49
    ואתם יכולים לראות שאם נשנה את הערך כאן
  • 0:49 - 0:52
    אז הרכב יזוז קדימה ואחורה.
  • 0:52 - 0:54
    נביא אותו חזרה ל-10.
  • 0:54 - 0:58
    כאן אנחנו מגדירים את צבע המילוי של הרכב ומציירים את שני הריבועים שמהווים את הרכב עצמו.
  • 0:58 - 1:00
    שימו לב, המלבן הראשון הזה הוא עבור החלק התחתון
  • 1:00 - 1:02
    והמלבן הזה האו עבור החלק העליון.
  • 1:02 - 1:05
    ואז אנחנו עושים את אותו הדבר עבור הגלגלים
  • 1:05 - 1:07
    נגדיר את צבע המילוי ונצייר את שתי האליפסות
  • 1:07 - 1:09
    אחת ב-x + 25
  • 1:09 - 1:10
    ואחת ב- x + 75
  • 1:10 - 1:13
    עכשיו אנחנו מגיעים לחלק החדש,
  • 1:13 - 1:15
    מה שיש לנו כאן נקרא הגדרת הפונקציה
  • 1:15 - 1:17
    תלמדו על זה יותר מאוחר.
  • 1:17 - 1:20
    כרגע, פשוט תסתכלו על זה ותזכרו איך זה נראה.
  • 1:20 - 1:24
    הדבר החשוב לשים אליו לב הוא המילה הזו ״draw״ והסוגריים האלו.
  • 1:24 - 1:25
    הסוגר הפותח כאן
  • 1:25 - 1:27
    והסוגר שמסמן את הסוף כאן
  • 1:27 - 1:31
    לכל זה אנחנו קוראים לולאת הציור, או לולאת האנימציה (לולאת ההנפשה)
  • 1:31 - 1:35
    וכל מה שתשימו בתוך הסוגריים האלו ירוץ שוב ושוב ושוב ממש ממש מהר.
  • 1:35 - 1:37
    ולכן זה נקרא לולאה.
  • 1:37 - 1:42
    וכל דבר מחוץ ללולאה הזו מורץ פעם אחת בלבד רק בתחילת התוכנה.
  • 1:42 - 1:46
    אז הצעד הראשון באנימציה הוא להעביר את כל הקוד שלכם לתוך הסוגריים האלו
  • 1:46 - 1:48
    כך שהתמונה שלכם תצוייר שוב ושוב.
  • 1:48 - 1:52
    אז בואו נעשה את זה. אני הולכת לקחת את כל קוד הציור הזה.
  • 1:52 - 1:54
    ואז לשים אותו פה בתוך הלולאה שלי.
  • 1:54 - 2:02
    ועל מנת להזכיר לעצמי שבלוק הקוד הזה בתוך הלולאה, אני הולכת לסדר את הכניסה של הטקסט על ידי בחירה של הטקסט ולחיצה על TAB
  • 2:02 - 2:06
    ועכשיו אני יודעת שהקוד הזה בתוך הסוגריים.
  • 2:06 - 2:10
    כמו שאתם רואים הכל נשאר אותו הדבר, כלום לא השתנה.
  • 2:10 - 2:18
    מכיוון שבפעם הראשונה שנריץ את לולאת הציור, המחשב יגיד משהו כמו ״אוקיי, אני אעשה משתנה חדש בשם x, אכוון אותו ל-10, אצייר שני ריבועים, אצייר שתי אליפסות״.
  • 2:18 - 2:24
    ואז הוא הולך בחזרה להתחלה ואומר לעצמו ״אוקיי, אני אעשה משתנה חדש בשם x, אכוון אותו ל-10, אצייר שני ריבועים, אצייר שתי אליפסות״.
  • 2:24 - 2:28
    ואז, ״אוקיי, אני אעשה משתנה חדש בשם x, אכוון אותו ל-10, אצייר שני ריבועים...״ בדיוק אותו הדבר.
  • 2:28 - 2:31
    כלום לא השתנה, אז דה, אתם לא הולכים לראות שום אנימציה.
  • 2:31 - 2:35
    זה בסך הכל מצייר את אותם ריבועים ואליפסות שוב על גבי הישנים.
  • 2:35 - 2:40
    זכרו מה שאמרנו: אם אתם רוצים ליצור אנימציה, אתם צריכים לשנות משהו קטן בכל פעם.
  • 2:40 - 2:43
    אז אם אני רוצה שהמכונית שלי למשל תזוז קדימה
  • 2:43 - 2:45
    כדאי שאני אשנה את הערך המשתנה x נכון?
  • 2:45 - 2:48
    אז כן, בואו פשוט נעשה את זה...11
  • 2:48 - 2:51
    אה!! לא! אבל עכשיו זה הולך להיות 11 בכל פעם ופעם.
  • 2:51 - 2:58
    איך לעזאזל אני אמורה לגרום לערך של x להשתנות בזמן שהמחשב מריץ את הקוד שוב ושוב?
  • 2:58 - 3:00
    אוקיי, שימו לב לטריק הקסום הבא:
  • 3:00 - 3:03
    זוכרים ש-"var x" יוצר משתנה חדש?
  • 3:03 - 3:08
    כשזה נמצא בתוך לולאת הציור, זה יוצר משתנה חדש ״x״ חדש בכל פעם.
  • 3:08 - 3:13
    מה שאנחנו לעשות הוא לקחת את המשתנה הזה ולהוציא אותו מלולאת הציור. ככה הוא ייצור אותו רק פעם אחת.
  • 3:13 - 3:23
    ואז, בכל פעם שהמחשב יריץ את הקוד הזה וייראה את המשתנה x, הוא יישתמש באותו ערך של המשתנה ממקודם
  • 3:23 - 3:31
    אז אני פשוט הולכת לעשות את זה, אני הולכת לקחת את המשתנה הזה ולשים אותו מחוץ ללולאת הציור כך שהוא ייווצר רק פעם אחת.
  • 3:31 - 3:38
    ובכל פעם שהמחשב ייתקל במשתנה x הוא יישתמש באותו ערך ששמנו בו מקודם. כרגע, הערך האחרון שהכנסנו לו הוא ״11״.
  • 3:38 - 3:42
    זה תמיד יהיה 11, אבל הנה איפה שהקסם נכנס לפעולה.
  • 3:42 - 3:53
    איפשהו בתוך לולאת הציור, אנחנו הולכים לשנות את הערך של x כך שהוא ייגדל במקצת מערכו הקודם, נניח כך: x יקבל את הערך הקודם של x פלוס, בואו נגיד, 1.
  • 3:53 - 3:55
    יאי! זה עובד!
  • 3:55 - 4:03
    חוצמזה ש... אה.. זה קצת מרוח. ואם אתם תוהים למה זה נראה ככה, זה בגלל ששכחנו לצייר את הרקע הזה בתוך לולאת הציור.
  • 4:03 - 4:07
    כך שזה מצייר את המכונית שוב ושוב, אבל ניתן לראות את כל המכוניות שמתחת למכונית החדשה.
  • 4:07 - 4:12
    אז אני אשים את שורת הקוד הזו בראש הלולאה, ככה,
  • 4:12 - 4:16
    ואלחץ ״אתחל״ בשביל שאוכל לראות את המכונית שלי שוב...
  • 4:16 - 4:18
    יאי! זה כל כך מושלם!
  • 4:18 - 4:22
    ואם רצינו לגרום למכונית לנסוע מהר יותר, נוכל פשוט לשנות את x במעט יותר בכל פעם.
  • 4:22 - 4:29
    אם נגדיל אותו בכל פעם ב-10 נניח, ואוו, זה ממש עף מהמסך! ואני יכולה גם לעשות את הערך שלילי, נגיד  x - 10, ואז...
  • 4:29 - 4:35
    הנה זה בא! נעשה את זה חיובי שוב, אופס, הנה זה הולך.
  • 4:35 - 4:37
    אז הנה הדברים החשובים שצריך לזכור:
  • 4:37 - 4:44
    הדבר הזה כאן נקרא לולאת הציור. אתם צריכים לשים את קוד הציור שלכם כאן בפנים, בתוך הלולאה הזו על מנת שהוא יצוייר שוב ושוב.
  • 4:44 - 4:52
    ואז, אתם רוצים ליצור משתנה מחוץ ללולאת הציור שלכם. זה סופר חשוב להגדיר את המשתנה מחוץ ללולאה על מנת שנוכל להשתמש באותו אחד בכל פעם שנריץ את הקוד.
  • 4:52 - 4:56
    ואז בתוך הלולאה, כאן, נשנה את המשתנה במעט בכל פעם
  • 4:56 - 5:02
    בדרך כלל על ידי השמה של הערך הקודם שלו ועוד מספר כלשהו או פחות מספר כלשהו.
  • 5:02 - 5:08
    ולבסוף, נשתמש במשתנה איפשהו בתוך קוד הציור כך שהציורים ייראו שונה בכל פעם.
  • 5:08 -
    וזהו! בהצלחה!
Title:
היכרות עם אנימציה
Description:

ניתן לצפות בסרטים נוספים בכתובת:
https://www.khanacademy.org/cs/programming/
more » « less
Video Language:
English
Duration:
05:11

Hebrew subtitles

Revisions

Our website uses cookies for analysis purposes.