Studio Editor: יצירת אינטראקציה מותאמת בעת הקלקה או מעבר עם העכבר | מרכז העזרה

Studio Editor: יצירת אינטראקציה מותאמת בעת הקלקה או מעבר עם העכבר

זמן קריאה: 6 דקות

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

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

דוגמה לאינטראקציות מותאמות עבור מעבר עם העכבר באתר שבאוויר

שלב 1 | הוסיפו גורם לפעולה (קליק או מעבר עם העכבר)

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

טיפ:

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

כדי להוסיף גורם מפעיל:

בחרו את האלמנט שיפעיל את האינטראקציה.
הקליקו על החץ לפתיחת חלונית ה-Inspector בפינה הימנית העליונה של ה-Editor.
הקליקו על הטאב Interactions (אינטראקציות).
בחרו ב-Hover / Click (הקלקה / מעבר עם העכבר).
הקליקו על ‎+ Add (הוספה).

טאב האינטראקציות בחלונית ה-Inspector, נוספת אינטראקציה חדשה בהקלקה או מעבר עם העכבר

שלב 2 | הגדירו את האינטראקציה

עכשיו אתם יכולים לבחור באיזה אלמנט תופיע האנימציה, איזו אנימציה תופיע, ואת הפעולה המדויקת שתתרחש במעבר עם העכבר או הקלקה (למשל, הפעלת האנימציה, כיבוי שלה וכו').

כדי להגדיר את האינטראקציה:

בחרו אפשרות מהתפריט הנפתח On Hover / On Click (במעבר עם העכבר / קליק):
- Start Animation: הקלקה / מעבר עם העכבר מעל לאלמנט מפעילים את האנימציה שבחרתם.
- Toggle On/Off: בדומה למתג, קליק על האלמנט מפעיל את האנימציה וקליק נוסף מסיר אותה.
- Reset Animation: הקלקה / מעבר עם העכבר מעל לאלמנט מסירה אנימציה שהופעלה קודם.
בחרו אפשרות מהתפריט הנפתח Animated element (אלמנט מונפש):
- Make the element trigger its own animation: הקליקו על שם האלמנט (המילה (self) מופיעה לידו).
- Animate a different element on the page: בחרו אלמנט מהתפריט הנפתח, או הקליקו על Choose on Canvas (בחירה על גבי הקנבס) כדי לבחור אותו בעמוד.
  טיפ: החזיקו את המקש Cmd / Ctrl כדי לבחור אלמנט צאצא.
הקליקו על הטאב Custom (מותאם).
הקליקו על Create Custom Animation (יצירת אנימציה מותאמת).

טיפ:

האנימציות המותאמות שאתם יוצרים נשמרות לשימוש עתידי באלמנטים אחרים.

צילום מסך של הטאב המותאם כשעדיין אין אנימציות שמורות

שלב 3 | ערכו את האנימציה

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

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