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

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

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

ב- Wix Studio Academy מחכים לכם עוד וובינרים, מדריכים וקורסים של Wix Studio.

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

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

טיפ:

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

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

בחרו את האלמנט שיפעיל את האינטראקציה.
הקליקו ב-editor מימין למעלה על אייקון פתיחת כלי ה-Inspector (עריכה) .

צילום מסך של פתיחת החלונית Inspector ב-Studio Editor

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

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

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

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

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

(בחלונית ה-Setup) בחרו אפשרות מהתפריט הנפתח 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 | ערכו את האנימציה

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

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