במאמר זה נכיר את הכלי 4.0 Microsoft Expression Blen ובנוסף נייצר אנימציית תנועה בסיסית ב – WPF
Blendהוא כלי המיועד בעיקר לצרכים גרפיים, ללא כל צורך לדעת או להכיר קוד XAM . כלי זה מאוד נוח לשימוש ומיועד
בעיקר לצרכי תכנון, עיצוב ופיתוח ממשקי משתמש גרפיים בטכנולוגיות SilverLight, WPF ו – Windows Phone .
הכלי מתממשק עם סביבת ה – VISUAL STUDIO כך שניתן לעבוד במקביל על אותו פרוייקט גם ב – BLEND
וגם ב – VISUAL STUDIOוכל באחת מהסביבות יגרום לשינוי בסביבה השנייה.
ראשית נפתח פרוייקט חדש ע"י לחיצה על File à New Project או בקיצור Ctrl+Shift+n
נבחר בפרוייקט WPF Application , ניתן לו שם מתאים ונאשר את המסך.
כעת נוצר לנו החלון Design שבו נוכל להוסיף פקדים. נשים לב שבצד שמאל מופיע סרגל
ובו מופיעים הפקדים הנפוצים והפעולות שאותם נרצה לבצע בסביבה. נלחץ קליק ימני על הסמל
של המלבן בצד שמאל ונבחר באליפסה.
ניתן גם לראות פקדים נוספים ע"י לחיצה על הטאב Assets .
נגרור את העיגול אל מרכז החלון ונשחרר
נלחץ על selection האייקון של החץ העליון בפינה השמאלית על מנת לשנות את הגודל של העיגול
בנוסף, נשנה את הצבע של מילוי העיגול ע"י המאפיינים של הפקד בצד ימין ע"י לחיצה על הפאנל של מילוי הצבעים.
כעת, נעבור לייצור האנימציה. תחת הטאב Object And TimeLine ( אם הוא אינו מופיע סמנו אותו
windowà Object and TimeLine
) נלחץ על ה + ליצירת אנימציה חדשה.
ונקרא בשם מתאים לאותו Storyboard, ניתן לשלב מספר Storyboardבפרוייקט כך שחשוב לתת שם משמעותי לאותה אנימציה כך שבמידת הצורך נוכל לשנות בהתאמה ונבין את המטרה של אותה אנימציה (קוד XAML )
שימו לב כי לאחר הוספת ה – StoryBoard יוצג עיגול אדום בפינה הימנית העליונה של המסך, זה מצביע על כך שאנחנו נמצאים במצב הקלטה. כאשר במצב הקלטה, כל שינוי שיבוצע יהיה קשור לאניציה. כדי להפעיל את מצב ההקלטה או לבטל יש ללחוץ על העיגול האדום, בפינה הימנית העליונה של המסך, זה יעביר מאדום לאפור.
נעבור לתצוגת אנימציה – זאת תצוגה נוחה יותר עבור ניהול של StoryBoard ארוכים, ע"י
לחיצה על windows à WorkSpaces àAnimation
וכך נראה המסך לאחר שינוי התצוגה
האנימציה מבוססת על KeyFrames המוגדרים בזמנים מסוימים. כדי להוסיף KeyFrames עלינו לגשת לטאב Object And Timeline לבחור את האובייקטים שברצוננו להנפיש וללחוץ על כפתור ההקלטת Keyframe (אליפסה עם + כפי שמוגדש באדום). כעת נראה כי Keyframe חדש התווסף על ידי כל האובייקט באפס שניות.
כדי להוסיף Keyframe בנקודה ספציפית לאורך ציר הזמן, יש לגרור את הפס צהוב הזמן עד לנקודה הנדרשת ואז ללחוץ על כפתור Record Keyframe . כדי להפוך את העיגול בחרתי חותמת זמן של 2 שניות כמוצג להלן.
בנוסף ניתן גם להנפיש את אותה נקודת זמן ע"י הזזת העיגול למקום הרצוי ב – 2 שניות, נשים לב שנוצר מעיין מסלול מקווקו
לאחר שקבענו איך המסך יראה באותה נקודת זמן נלחץ על Record keyFrame
נחזור על הפעולה וכעת ב – 6 שניות נעלה את הכדור חזרה למעלה, ונלחץ שוב על הקלטת נקודת זמן, כעת אם נרצה לראות את את ההקלטה שביצעו נלחץ על play (משולש הפוך)
כעת רק על מנת לוודא שהתנועה היא מושלמת על גבי ציר ה – y נפתח את המאפיינים של התנועה של הכדור ונמחק את קורדינטת ה - x פשוט ע"י סימון השורה שמופיע בה x ומחיקתה ע"י המקש delete
כך שבסופו של דבר החלון עם המאפיינים נראה כך
בנוסף ניתן גם לקבוע כי האנימציה תחזור על עצמה ע"י לחיצה על הstoryBoard וסימון המאפיין AutoReverse
נשים לב שמאחורי הקלעים נוצר לנו קוד XAML שניתן לראותו על ידי הכפתור גדול קטן בפינה הימנית העליונה אך בפועל לא כתבנו שורת קוד אחת
וכעת אם נרצה לראות את החלון שנוצר בדומה ל - Visual Studio לחיצה על Ctrl F5 או Project --> Run Project תקפיץ לנו חלון שבו האנימציה שבנינו מופעלת
בנוסף לאנימצית תנועה ניתן להוסיף עוד אנימציות רבות כגון מילוי של הכדור, הזזת אובייקטים בתלת מימד, הצגת סרטים ועוד.
|
