יצירת אנימציה הכוללת תזוזה של צורה על המסך היא משימה מאתגרת, ומעורבת בה מתמטיקה מעניינת. נסביר ונדגים.

אנימציות ופיתוח אפליקציה: טניה אורנשטיין ותומר מלכוב

נניח שאנו רוצים להוסיף לשקף במצגת שלנו אנימציה של מכונית במבט-על, שנעה מלמטה למעלה. לשם כך ניצור שלושה עותקים של השקף: בראשון נציג ציור של מכונית בתחתית, בשני נמקם את הציור באמצע, ובשלישי תהיה המכונית למעלה. אם נעביר את השקפים במהירות, נראה כאילו המכונית נעה, אך התנועה תיראה לא רציפה. כדי לקבל תוצאה טובה יותר, נוסיף שקפים ונקפיד שתזוזת המכונית בין כל שקף לזה שאחריו תהייה קבועה. כעת התנועה נראית חלקה, אבל היא עדיין לא נראית טוב, והצופים במצגת לא מתלהבים. מה הבעיה?

בשנת 1981 תיארו האנימטורים אולי ג'ונסטון ופרנק תומאס בספרם "אשליית החיים" מערכת של 12 עקרונות ליצירת אנימציה [1]. עקרונות אלה, שנועדו להנחות את המפתחים בחברת דיסני ליצור אנימציות שייראו מציאותיות, נעשו מקובלים בקרב האנימטורים ולמעשה הפכו לתורה של האנימציה. אחד העקרונות, "האצה והאטה" [2], עוסק בייצוג תנועה על המסך: אנשים מצפים שלתנועת עצמים על המסך יהיו מאפיינים דומים לאלה של תנועה בעולם הממשי. במציאות עצם אינו עובר ממנוחה לתנועה מהירה בבת אחת; המהירות של עצם שמתחיל לנוע עולה בהדרגה, עד שהיא מגיעה לשיא. גם הבלימה היא הדרגתית: מהירות העצם יורדת, עד לעצירה. בהתאם לכך, נרצה לתכנן את התנועה באנימציה שלנו כך שתהיה איטית בהתחלה, תאיץ, ובהמשך תאט – עד לעצירה. כיצד נעשה זאת?

בימינו אין צורך לשכפל שקפים. באפליקציות רשת או בכלי אנימציה מודרניים, כמו אלה של אדובי, נוכל להגדיר את המיקום ההתחלתי והסופי של המכונית ואת משך התנועה, והתוכנה תיצור עבורנו את אפקט התנועה. זה נעשה על ידי הוספת תמונות שבהן מיקום המכונית משתנה כתלות בפונקציה הקרויה easing function" [2]", פונקציה המגדירה את מיקום המכונית y כתלות בזמן t.

האתגר של מפתחי האנימציה הוא לקבוע באיזו פונקציה להשתמש כדי שהתנועה תיראה טבעית והאנימציה תהיה נעימה לעין. לפיכך, באופן די מפתיע, אנימטורים עוסקים לפעמים בחקירת התנהגות פונקציות, תחום שרוב האנשים מקדישים לו תשומת לב רק כשהם מתכוננים למבחני בגרות במתמטיקה.

באיזו פונקציה כדאי לבחור? לצורך החקירה נצייר גרף שבו ציר X מייצג את הזמן t שעבר מתחילת התנועה (ערכו נע בין 0 ל-1), וציר Y מייצג את מרחק המכונית מנקודת ההתחלה, גם הוא בין 0 ל-1. גרף הפונקציה הפשוטה ביותר, y=t, הוא קו ישר. פונקציה זו מתארת נסיעה במהירות קבועה, והיא מתאימה למשל לאנימציה של מכונית שחולפת על המסך. אולם אנחנו רוצים שהמכונית תתחיל ממנוחה, תאיץ, ואחר כך תאט עד לעצירה – ולתיאור תנועה כזאת דרושה פונקציה שונה.

באפליקציה אפשר לראות איך משפיעות פונקציות שונות על מאפייני התנועה. לחובבי המתמטיקה שבינינו, הינה דוגמה אחת לפונקציה, שנקראת "Ease-in-out function": במחצית הראשונה של זמן התנועה (0.5>t) המהירות, שמבוטאת על ידי הנגזרת של הפונקציה, צריכה להתחיל מאפס ולעלות בהדרגה. פונקציה מתאימה לכך היא למשל y=2t^2, המתארת פרבולה. עבור t>0.5 נרצה להאט בהדרגה, לכן נשתמש בפונקציה המתארת פרבולה הפוכה, y=1-2(t-1)^2 , המתאימה למהירות שהולכת וקטנה ומתאפסת עבור 1=t. משילוב של שתי הפונקציות נקבל תנועה חלקה, המתחילה בהאצה ומסתיימת בהאטה ועצירה:

אם נוסיף לשקף גם משאית כבדה, נרצה שהיא תאיץ בקצב איטי יותר מהמכונית, לכן אולי כדאי להשתמש עבורה דווקא בפונקציה עם חזקה ממעלה גבוהה במקום בפרבולה. כדי שנוכל להתאים את התנועה לטיבו של העצם הנע, יש בתוכנות האנימציה מבחר גדול של פונקציות, כולל עקומת בזייה הפופולרית [4].

לסיכום, למדנו שאנימציה פשוטה היא נושא מעניין ומאתגר. אמנם אנחנו רואים אותה להרף עין, אבל המוח שלנו קולט,  ומיד מחליט באופן תת-מודע מה נראה יפה ומה לא מציאותי. לפיכך, יש חשיבות לבחירה נכונה, והמתמטיקה כמובן נמצאת לעזרה. המתמטיקה עוזרת גם בתחומים אחרים בעולם האנימציות, ובעתיד נדגים יישומים נוספים.

מקורות והרחבות:

[1] על 12 עקרונות האנימציה

[2] פוסט בבלוג - הסבר על "easing function"

[3] סרטון על האצה והאטה

[4] פוסט על עקומת בזייה – מדע גדול, בקטנה