חדש! Elementor
Experts Network — מצאו שותפים לדרך, קדמו והגדילו את העסק שלכם

הכירו את מהפכת האנימציה של לוטי

הדס גולצאקר | יוני 2020

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

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

אז מה זה לוטי?

לוטי היא ספריית קוד פתוח ליצירת אנימציות שמתאימה לכל הפלטפורמות: ווב, אנדרואיד, iOS או ווינדוס. האנימציות של לוטי מיוצאות מאפטר אפקטס לקובץ JSON, על ידי התוסף Bodymovin או תוסף של לוטי.

כאן מגיע הקטע המיוחד שהוא אחת הסיבות לפופולריות של לוטי: היא מרנדרת את האנימציה בלייב(!!). בווב או באפליקציות מובייל.

קצת היסטוריה

בפברואר 2015, הרנן טוריסי הוציא תוסף לאפטר אפקטס בשם Bodymovin, המייצא קבצי אפטר אפקטס ב-JSON. התוסף כולל בתוך הקבצים Javascript web player, כך שאפשר לרנדר את האנימציות בווב.

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

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

מה כל כך מיוחד בלוטי?

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

MP4

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

GIF

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

PNG sequence

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

Animated Vector Drawable

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

אנימציה בהתאמה אישית

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

ואז הגיעה לוטי...

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

אז איך משתמשים באנימציית לוטי?

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

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

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

איך מייבאים קבצים לתוך אפטר אפקטס? הנה הסבר קצר:

  • בפיגמה או סקאץ', רכזו את כל החומרים לאנימציה תחת קבוצה אחת
  • בחרו את הקבוצה ויצאו אותה כקובץ SVG
  • פתחו את הקובץ באילוסטרייטור ויצאו אותו כקובץ AI

*ישנה אופציה נוספת המאפשרת לדלג על שלושת השלבים הללו, בעזרת התוסף AEUX. זהו תוסף שמייצא מפיגמה וסקאץ׳ את הקבצים המתאימים לאפטר אפקטס.

עכשיו אתם מוכנים לעבור לשלב הבא, בתוך אפטר אפקטס:

  • יבאו את הקובץ לתוך אפטר אפקטס
  • צרו קומפוזיציה, קבעו את ה-Duration ובדקו את ה-Frame rate
  • המירו את האילוסטרציה ל-Shape layers
  • צרו אנימציה כלשהי
    יצאו את הקובץ עם Bodymovin או Lottie
  • בדקו את האנימציה על ידי גרירה של קובץ ה-JSON ל-Lottiefiles.com

*שימו לב, לוטי אינה תומכת ב-expressions, blending modes, luma mattes, layer styles – או כמעט בכל אפקט מהתפריט של אפטר אפקטס.

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

יצוא קבצים על ידי Bodymovin
יצוא קבצים על ידי Lottie

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

ויש גם אנימציות מוכנות מראש?

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

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

Lottie files
האתר הרשמי של לוטי, שבו תוכלו למצוא חבילות שלמות של אנימציות שנוצרו על ידי טובי האנימטורים. המבחר מתעדכן כל הזמן.

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

useAnimations
אתר עם אנימציות לאייקונים להורדה חינמית.

לסיכום,

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

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

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

רוצים להיות כותבים במגזין שלנו?

הדס גולצאקר

מובילת הצמיחה של אלמנטור בישראל, מעצבת, FOODIE ומעריצה של סטפן סגמייסטר

אהבתם? שתפו.
שיתוף ב facebook
שיתוף ב twitter
שיתוף ב telegram
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

רוצים להיות כותבים במגזין שלנו?

אין שום בעיה! מלאו את הטופס פה למטה
ואנחנו נהיה איתכם בקשר ממש בקרוב!

רוצים להיות חלק מאלמנטור?

אין שום בעיה! מלאו את הטופס פה למטה
ואנחנו נהיה איתכם בקשר ממש בקרוב!