Studio Editor: הוספה ועריכה של קובצי אנימציה של Lottie

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

ייבוא אנימציות מ-LottieFiles

אתם יכולים להוסיף כמה אנימציות Lottie שצריך כדי להפיח חיים בעיצוב שלכם. אחרי ששומרים אנימציה בסביבת העבודה ב-LottieFiles, אפשר להעתיק את כתובת ה-URL ולהדביק אותה ישירות ב-Studio Editor. האנימציה מתווספת מיידית כאלמנט חדש בעמוד.
קובץ GIF שמראה שאפשר להדביק אנימציות מ-lottie ישירות לתוך ה-Studio Editor
לחלופין, אתם יכולים להוסיף אלמנט חדש מסוג אנימציית Lottie ולהדביק את כתובת ה-URL הרלוונטית בחלונית Settings (הגדרות). 

כדי להוסיף אלמנט אנימציית Lottie:

  1. הקליקו על Add Elements (הוספת אלמנטים) בצד שמאל של ה-Editor.
  2. הקליקו על Embed & Social (הטמעה ורשתות חברתיות).
  3. הקליקו על Lottie Animations (אנימציות Lottie).
  4. הקליקו על אייקון ההוספה לאתר ליד Lottie Animation.


  5. (בטאב נפרד בדפדפן) העתיקו את כתובת ה-URL של האנימציה השמורה מחשבון LottieFiles שלכם.
  6. הדביקו את כתובת ה-URL של האנימציה ב-Editor:
    1. הקליקו על האלמנט של אנימציית Lottie ב-Editor.
    2. הקליקו על אייקון ההגדרות .
    3. הדביקו את כתובת ה-URL תחת What's the animation's URL?‎.
    4. הקישו על Enter במקלדת.
מה השלב הבא?
הקליקו על Preview animation (תצוגה מקדימה של האנימציה) בחלק העליון של חלונית ה-Settings (הגדרות) כדי לראות איך היא נראית לפני העלייה לאוויר.
הוספת אלמנט Lottie חדש ל-Editor והטמעת הלינק לאנימציה מחלונית ההגדרות.
עבודה עם נקודות ברייקפוינט:
אתם יכולים להתאים את הגודל של אנימציית Lottie לכל ברייקפוינט, כך שהיא תיראה טוב בכל מסך. 

שינוי אנימציית Lottie

כדי להחליף לאנימציית Lottie אחרת, פשוט מדביקים את כתובת ה-URL החדשה בחלונית ה-Settings של האלמנט. 

כדי לשנות את האנימציה:

  1. בחרו את האלמנט של אנימציית Lottie.
  2. הקליקו על אייקון ההגדרות .
  3. הדביקו את כתובת ה-URL של האנימציה החדשה תחת What's the animation's URL?‎.
GIF שמראה איפה להעתיק את כתובת ה-URL של אנימציית Lottie ואיך האנימציה משתנה מיידית על גבי הקנבס

הפעלת האנימציה בלופ

אתם יכולים לבחור איך אנימציית Lottie תופעל באתר של הלקוח - פעם אחת בלבד, או בלופ. 

כדי להגדיר את אופן הפעולה של האנימציה:

  1. בחרו את האלמנט של אנימציית Lottie.
  2. הקליקו על אייקון ההגדרות .
  3. הקליקו על המתג Plays in a loop (הפעלה בלופ) כדי להפעיל או לכבות את האפקט.
צילום מסך של המתג בחלונית ההגדרות ששולט על אופן הפעולה של אנימציית Lottie

הוספת טקסט חלופי (alt text) לאנימציית Lottie

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

כדי להוסיף טקסט חלופי לאנימציה:

  1. בחרו את האלמנט של אנימציית Lottie.
  2. הקליקו על אייקון ההגדרות .
  3. גללו למטה אל Animation Text (טקסט האנימציה).
  4. הכניסו את התיאור הטקסטואלי תחת Write alt text for your animation (כתיבת טקסט חלופי לאנימציה).
  5. הקישו על Enter במקלדת.
הוספת טקסט חלופי לאלמנט אנימציה של Lottie
כדאי לדעת:
אנימציות Lottie מומרות אוטומטית לקובצי JSON כשמייבאים אותן לאתר Wix. מסיבות טכניות אי אפשר להכיל את כל שדות הקובץ, לכן אנימציות Lottie עשויות להיראות קצת אחרת באתר Wix הפעיל (למשל טווח מצומצם יותר או פחות תנועה). 

זה עזר לך?

|