מבוא לאנימציה עם תקליט Hype

• מאי 11, 2024

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

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

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

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

1. לחץ על קובץ - חדש כדי להפעיל מסמך חדש ב- Hype, באמצעות הגדרות ברירת המחדל.
   
   בואו נוסיף את המלבן למסך.
   
   
2. לחץ על סמל האלמנטים בסרגל הכלים ובחר מלבן. ההייפ יניח מלבן חדש במרכז המסך.
   
   בואו למקם את המלבן במקום בו אנו רוצים שיהיה לתחילת האנימציה. אנו נשמור על גודל ברירת המחדל, כך שכל מה שאנחנו צריכים לעשות זה להזיז את המלבן.
   
   
3. גרור את המלבן לקצה השמאלי של המסך.
   
   
4. התבונן במפקח הערכים. המלבן נמצא כעת 7 פיקסלים מהקצה השמאלי ו 149 פיקסלים מהקצה העליון. כמו כן, זה 102 x 102 פיקסלים.
   
   

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

המשך