יש הרבה דרכים ליצור אנימציה (להנפיש)
אבל העיקרון הבסיסי הוא אותו הדבר
אם תקחו כמה תמונות או ציורים
שכל אחד מהם שונה במעט מהקודם
ותעלעלו בהם מספיק מהר
זה ייראה כאילו התמונה זז.
בימים הישנים והטובים, היו מציירים את כל התמונות האלו ביד.
וזה היה לוקח מלא זמן לעשות סרטון קצר של שלוש שניות של אנימציה.
למזלנו, אנחנו חיים בעתיד :)
וזה למעשה די קל ליצור אנימציה פשוטה עם קוד.
אני אראה לכם איך!
בצד ימין, אתם יכולים לראות את הרכב החמוד והקטן שלנו עם רקע צהוב.
וכן, אני עיצבתי את הרקע הזה בעצמי, תודה.
בכל אופן, כאן אתם יכולים לראות שאנחנו מגדירים את זה הרקע היפייפה הזה
ולמכונית אין קווי מתאר, שאת זה עשינו את פונקציית ()noStroke.
כאן אתם יכולים לראות שאנחנו מכריזים על משתנה חדש ״x״, המיקום של הרכב, ונותנים לו את הערך 10
ואתם יכולים לראות שאם נשנה את הערך כאן
אז הרכב יזוז קדימה ואחורה.
נביא אותו חזרה ל-10.
כאן אנחנו מגדירים את צבע המילוי של הרכב ומציירים את שני הריבועים שמהווים את הרכב עצמו.
שימו לב, המלבן הראשון הזה הוא עבור החלק התחתון
והמלבן הזה האו עבור החלק העליון.
ואז אנחנו עושים את אותו הדבר עבור הגלגלים
נגדיר את צבע המילוי ונצייר את שתי האליפסות
אחת ב-x + 25
ואחת ב- x + 75
עכשיו אנחנו מגיעים לחלק החדש,
מה שיש לנו כאן נקרא הגדרת הפונקציה
תלמדו על זה יותר מאוחר.
כרגע, פשוט תסתכלו על זה ותזכרו איך זה נראה.
הדבר החשוב לשים אליו לב הוא המילה הזו ״draw״ והסוגריים האלו.
הסוגר הפותח כאן
והסוגר שמסמן את הסוף כאן
לכל זה אנחנו קוראים לולאת הציור, או לולאת האנימציה (לולאת ההנפשה)
וכל מה שתשימו בתוך הסוגריים האלו ירוץ שוב ושוב ושוב ממש ממש מהר.
ולכן זה נקרא לולאה.
וכל דבר מחוץ ללולאה הזו מורץ פעם אחת בלבד רק בתחילת התוכנה.
אז הצעד הראשון באנימציה הוא להעביר את כל הקוד שלכם לתוך הסוגריים האלו
כך שהתמונה שלכם תצוייר שוב ושוב.
אז בואו נעשה את זה. אני הולכת לקחת את כל קוד הציור הזה.
ואז לשים אותו פה בתוך הלולאה שלי.
ועל מנת להזכיר לעצמי שבלוק הקוד הזה בתוך הלולאה, אני הולכת לסדר את הכניסה של הטקסט על ידי בחירה של הטקסט ולחיצה על TAB
ועכשיו אני יודעת שהקוד הזה בתוך הסוגריים.
כמו שאתם רואים הכל נשאר אותו הדבר, כלום לא השתנה.
מכיוון שבפעם הראשונה שנריץ את לולאת הציור, המחשב יגיד משהו כמו ״אוקיי, אני אעשה משתנה חדש בשם x, אכוון אותו ל-10, אצייר שני ריבועים, אצייר שתי אליפסות״.
ואז הוא הולך בחזרה להתחלה ואומר לעצמו ״אוקיי, אני אעשה משתנה חדש בשם x, אכוון אותו ל-10, אצייר שני ריבועים, אצייר שתי אליפסות״.
ואז, ״אוקיי, אני אעשה משתנה חדש בשם x, אכוון אותו ל-10, אצייר שני ריבועים...״ בדיוק אותו הדבר.
כלום לא השתנה, אז דה, אתם לא הולכים לראות שום אנימציה.
זה בסך הכל מצייר את אותם ריבועים ואליפסות שוב על גבי הישנים.
זכרו מה שאמרנו: אם אתם רוצים ליצור אנימציה, אתם צריכים לשנות משהו קטן בכל פעם.
אז אם אני רוצה שהמכונית שלי למשל תזוז קדימה
כדאי שאני אשנה את הערך המשתנה x נכון?
אז כן, בואו פשוט נעשה את זה...11
אה!! לא! אבל עכשיו זה הולך להיות 11 בכל פעם ופעם.
איך לעזאזל אני אמורה לגרום לערך של x להשתנות בזמן שהמחשב מריץ את הקוד שוב ושוב?
אוקיי, שימו לב לטריק הקסום הבא:
זוכרים ש-"var x" יוצר משתנה חדש?
כשזה נמצא בתוך לולאת הציור, זה יוצר משתנה חדש ״x״ חדש בכל פעם.
מה שאנחנו לעשות הוא לקחת את המשתנה הזה ולהוציא אותו מלולאת הציור. ככה הוא ייצור אותו רק פעם אחת.
ואז, בכל פעם שהמחשב יריץ את הקוד הזה וייראה את המשתנה x, הוא יישתמש באותו ערך של המשתנה ממקודם
אז אני פשוט הולכת לעשות את זה, אני הולכת לקחת את המשתנה הזה ולשים אותו מחוץ ללולאת הציור כך שהוא ייווצר רק פעם אחת.
ובכל פעם שהמחשב ייתקל במשתנה x הוא יישתמש באותו ערך ששמנו בו מקודם. כרגע, הערך האחרון שהכנסנו לו הוא ״11״.
זה תמיד יהיה 11, אבל הנה איפה שהקסם נכנס לפעולה.
איפשהו בתוך לולאת הציור, אנחנו הולכים לשנות את הערך של x כך שהוא ייגדל במקצת מערכו הקודם, נניח כך: x יקבל את הערך הקודם של x פלוס, בואו נגיד, 1.
יאי! זה עובד!
חוצמזה ש... אה.. זה קצת מרוח. ואם אתם תוהים למה זה נראה ככה, זה בגלל ששכחנו לצייר את הרקע הזה בתוך לולאת הציור.
כך שזה מצייר את המכונית שוב ושוב, אבל ניתן לראות את כל המכוניות שמתחת למכונית החדשה.
אז אני אשים את שורת הקוד הזו בראש הלולאה, ככה,
ואלחץ ״אתחל״ בשביל שאוכל לראות את המכונית שלי שוב...
יאי! זה כל כך מושלם!
ואם רצינו לגרום למכונית לנסוע מהר יותר, נוכל פשוט לשנות את x במעט יותר בכל פעם.
אם נגדיל אותו בכל פעם ב-10 נניח, ואוו, זה ממש עף מהמסך! ואני יכולה גם לעשות את הערך שלילי, נגיד x - 10, ואז...
הנה זה בא! נעשה את זה חיובי שוב, אופס, הנה זה הולך.
אז הנה הדברים החשובים שצריך לזכור:
הדבר הזה כאן נקרא לולאת הציור. אתם צריכים לשים את קוד הציור שלכם כאן בפנים, בתוך הלולאה הזו על מנת שהוא יצוייר שוב ושוב.
ואז, אתם רוצים ליצור משתנה מחוץ ללולאת הציור שלכם. זה סופר חשוב להגדיר את המשתנה מחוץ ללולאה על מנת שנוכל להשתמש באותו אחד בכל פעם שנריץ את הקוד.
ואז בתוך הלולאה, כאן, נשנה את המשתנה במעט בכל פעם
בדרך כלל על ידי השמה של הערך הקודם שלו ועוד מספר כלשהו או פחות מספר כלשהו.
ולבסוף, נשתמש במשתנה איפשהו בתוך קוד הציור כך שהציורים ייראו שונה בכל פעם.
וזהו! בהצלחה!