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

‏OverShoot “החטאת מטרה” – עקרון זה גורס כי כל אובייקט המבצע עצירה, יחטיא מעט את
נקודת העצירה לפני שייעצר לחלוטין, ולכן מזכיר קצת תנועה של מטוטלת. כדי להבין עקרון זה בפשטות, נבצע אותו בעצמנו:

1.    מקם את יד ימין ממולך כאשר היא מתוחה ואגרף את כף היד.

2.    הורד את האגרוף במהירות כלפי מטה ובלום בעוצמה את התנועה.

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

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

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

א. על מאפיין Scale של השכבה יש לייצר את הקיפריים הראשון בערך 0% ואת הקיפריים האחרון בערך
של 100%.

ב. יש לשכפל את הקיפריים האחרון (100%) 5 פעמים במרווח זהה בין כל הקיפריימים.

ג. עכשיו יש לשנות את  ערכי הקיפריימים המשוכפלים להחטאה שיורדת בחצי בכל פעם, עד
שמגיעה לערך הסופי שנקבע מראש על הקיפריים האחרון, למשל: 120%, 90%, 105%, 97.5%, 101.25% ולבסוף 100%.

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

טיפ: כדאי לשנות את ערכי influence של הקיפריימים ל-50% בכניסה וביציאה בכדי לקבל
תאוצה ותאוטה יותר חלקות.

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

א. על מאפיין Rotation של השכבה יש לייצר את הקיפריים הראשון בערך 90 ואת הקיפריים האחרון
בערך של 0.

ב. יש לשכפל את הקיפריימים שנוצרו 4 פעמים במרווחים זהים. חשוב להפוך את כל הקיפריימים
ל-Easy Ease, למעט הקיפריים הראשון.

ג. בחלון הגרפים יש לבחור בגרף הערכים (Value Graph)

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

ביטויים: יש לייצר את הקיפריים הראשון והאחרון, ולהשתמש בביטוי אשר מבצע באופן
אוטומאטי אנימציית OverShoot על פי המרחק המצוי בין הקיפריימים. לדוגמה:

א. יש ליצור אנימציה על מאפיין Position של השכבה כאשר המרחק בין הקיפריים הראשון לשני הוא
5 פריימים.

ב. יש להקיש Alt+Click על שעון העצר של Position ולהדביק את הביטוי הבא (שנלקח מהאתר הזה):

‏freq = 3;

‏decay = 5;

‏n = 0;

‏if (numKeys > 0){

‏  n = nearestKey(time).index;

‏  if (key(n).time > time) n–;

}

‏if (n > 0){

‏  t = time – key(n).time;

‏  amp = velocityAtTime(key(n).time – .001);

‏  w = freq*Math.PI*2;

‏  value + amp*(Math.sin(t*w)/Math.exp(decay*t)/w);

‏}else

‏  value

ג. ניתן לשנות את ערך freq ו-Decay בכדי להשפיע על אנימציית Overshoot.

print