doron amir
 
דואר אלקטרוני:
 
 
סיסמה:
 
 
 
 
 
 
לוח פגישות
 
|
 
איזכור סיסמא
 
עברית
 
|
 
english
 
|
 
русский
 
 
 
doron amir
 
קורסים ותרגול
 
עמוד הבית
 
חבילות
הדרכה
 
החשבון שלי
 
אודות
דורון אמיר
 
צור קשר
 
מאגר תרגילים ופתרונות
 
מאמרי גולשים
 
קורס אנדרואיד

יצירת אנימציה ב - WPF באמצעות Microsoft Expression Blend 4.0

צפיות:
6,561
דירוג:
8.3
דירוג המאמר:
 
שליחה
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

במאמר זה נכיר את הכלי 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 תקפיץ לנו חלון שבו האנימציה שבנינו מופעלת


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

נכתב על-ידי: מולי משיח
דירוג המאמר:
 
שליחה
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
אפליקציות אפל
אפליקציות אנדרואיד
001 קורס אנדראויד באתר