Studio Editor: הוספה ועריכה של קובצי אנימציה של Lottie
4 דקות
LottieFiles הוא מקור מצוין לאנימציות איכותיות שתוכלו להוסיף לאתרים שאתם בונים עבור לקוחותיכם. אחרי שמייבאים את האנימציה דרך ה-JSON URL שלה, אפשר לשנות את גודלה לפי הצורך ולהחליט אם היא תפעל בלופ.
לפני שתתחילו:
כדי לייבא אנימציה, אתם צריכים חשבון ב-LottieFiles.
ייבוא אנימציות מ-LottieFiles
אתם יכולים להוסיף כמה אנימציות Lottie שצריך כדי להפיח חיים בעיצוב שלכם. אחרי ששומרים אנימציה בסביבת העבודה ב-LottieFiles, אפשר להעתיק את כתובת ה-URL ולהדביק אותה ישירות ב-Studio Editor. האנימציה מתווספת מיידית כאלמנט חדש בעמוד.
לחלופין, אתם יכולים להוסיף אלמנט חדש מסוג אנימציית Lottie ולהדביק את כתובת ה-URL הרלוונטית בחלונית Settings (הגדרות).
חשוב:
Wix תומכת רק בכתובות URL של Lottie בפורמט JSON.
כדי להוסיף אלמנט אנימציית Lottie:
- הקליקו על Add Elements (הוספת אלמנטים) בצד שמאל של ה-Editor.
- הקליקו על Media (מדיה).
- הקליקו על Lottie.
- הקליקו על אייקון ההוספה לאתר שליד Lottie Animation (אנימציית לוטי) .
- (בלשונית נפרדת בדפדפן) העתיקו את כתובת ה-JSON של האנימציה השמורה מחשבון LottieFiles שלכם.
- הדביקו את כתובת ה-URL של האנימציה ב-Editor:
- הקליקו על האלמנט Lottie ב-Editor.
- הקליקו על אייקון ההגדרות .
- הדביקו את כתובת ה-URL תחת What's the animation's URL?.
- הקישו על Enter במקלדת.
(הוספת אלמנטים) בצד שמאל של ה-Editor.
שליד Lottie Animation (אנימציית לוטי) .
.מה השלב הבא?
הקליקו על Preview animation (תצוגה מקדימה של האנימציה) בחלק העליון של חלונית ה-Settings (הגדרות) כדי לראות איך היא נראית לפני העלייה לאוויר.
עבודה עם נקודות ברייקפוינט:
אתם יכולים להתאים את הגודל של אנימציית Lottie לכל ברייקפוינט, כך שהיא תיראה טוב בכל מסך.
שינוי אנימציית Lottie
כדי להחליף לאנימציית Lottie אחרת, פשוט מדביקים את כתובת ה-URL החדשה בחלונית ה-Settings של האלמנט.
כדי לשנות את האנימציה:
- בחרו את האלמנט של אנימציית Lottie.
- הקליקו על אייקון ההגדרות .
- הדביקו את כתובת ה-URL של האנימציה החדשה תחת What's the animation's URL?.
הפעלת האנימציה בלופ
אתם יכולים לבחור איך אנימציית Lottie תופעל באתר של הלקוח - פעם אחת בלבד, או בלופ.
כדי להגדיר את אופן הפעולה של האנימציה:
- בחרו את האלמנט של אנימציית Lottie.
- הקליקו על אייקון ההגדרות .
- הפעילו או כבו את המתג Plays in a loop (הפעלה בלופ).
הוספת טקסט חלופי (alt text) לאנימציית Lottie
מחלונית ה-Settings (הגדרות), הוסיפו טקסט חלופי שיתאר בקצרה את האנימציה ו/או את האתר. זה גם יכול לשפר את דירוג ה-SEO של האתר וגם עוזר למשתמשים הנעזרים בקוראי מסך להבין מה מוצג באנימציה.
כדי להוסיף טקסט חלופי לאנימציה:
- בחרו את האלמנט של אנימציית Lottie.
- הקליקו על אייקון ההגדרות .
- גללו למטה אל Animation Text (טקסט האנימציה).
- הכניסו את התיאור הטקסטואלי תחת Write alt text for your animation (כתיבת טקסט חלופי לאנימציה).
- הקישו על Enter במקלדת.
כדאי לדעת:
רק קובצי Lottie בפורמט JSON נתמכים באתרי Wix. מסיבות טכניות, אי אפשר להכיל את כל שדות הקבצים בקובצי JSON. לכן האנימציות של Lottie עשויות להיראות קצת אחרת באתר Wix פעיל (למשל, טווח מצומצם יותר / פחות תנועה).