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

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

‍

מה זה Lottie (לוטי)?

‍לוטי (Lottie) זה קובץ אנימציה קל משקל מבוסס JSON, הניתן להטמיע כמעט בכל דפדפן, ובכל מכשיר עם מערכת הפעלה IOS, Android ו-Tizen. בין אם אתם מפתחים למובייל, וואב או אפילו סתם בונים דפי נחיתה בוורדפרס - כמעט לכל פלטפורמה/טכנולוגיה קיימת אינטגרציה פשוטה לשלב אנימציותLottie במוצר שלכם. הנה כמה נקודות בהן Lottie מתעלה על שאר הדרכים האחרות להציג אנימציות כיום:

שיפור ביצועים ‍

מכיוון שלוטי הוא קובץ מבוסס קוד, המשקל שלו נמוך בצורה דרמטית בהשוואה לקבצי mp4 או GIF. בוא ניקח למשל Loaders -זה הרבה יותר כיף כשיש משהו להסתכל עליו בזמן שהאתר נטען, אבל אם זה גורם לעוד זמן טעינה, מה עשינו בזה? לפני לוטי, היינו משתמשים ב-GIF כדי לייצר לואדרים, ומשקלם יכול להיות כפול ואף יותר מכך ביחס לקובץ לוטי. יש לכם לואדר באתר? תבדקו כמה הוא שוקל לעומת הדוגמאות כאן (רמז - 14KB):

איכות מקסימלית ‍

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

אינטרקטיביות

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

‍עובד בכל הפלטפורמות‍

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

‍

איך עובדים עם Lottie?

אז השאלה מתחלקת כאן לשני חלקים ותלויה במה שאתם רוצים להשיג:
1. יצירת אנימציה חדשה באמצעות After Effects
2. שילוב אנימציה (מוכנה) של לוטי באתר/אפליקציה שלכם

1. יצירת אנימציה באמצעות After Effects

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

‍

2. שילוב אנימציה של Lottie באתר/אפליקציה

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

‍
‍

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

אין לך מושג ב-After Effects? אין בעיה. בעקבות ההצלחה של Lottie יותר ויותר מאגרים אינטרנטיים בצורה של מרקפלייס קמו על מנת לספק לקהל הרחב (והלא מבין באנימציה) מגוון אנימציות מוכנות לשימוש בחינם או תשלום סמלי. במידה ואתם צריכים אנימציה תפורה אישית לצרכים שלכם, מוזמנים להציץ במאגר המעצבים והאנימטורים באתר או להעזר בסטודיו שלנו.

Lottie Files
האתר הרישמי של Lottie. תוכלו למצוא שם מאות אנימציות בחינם ומידע נוסף על הכלי הזה. מרבית האנימציות שראיתם כאן נלקחו משם.

Motion Elements
מאגר אנימציות מחולק לפי קטגוריות.

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

‍

הנה כמה אנימציות מגניבות לדוגמה מתוך Lottie Files:

והנה דוגמא שעשינו עבור ה-Header של האתר של הסטודיו שלי:

‍

מתי Lottie פחות מתאים?

לוטי הוא פורמט נהדר, עם זאת, ישנן גם מגבלות שכדאי להכיר:

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

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

‍

לסיכום

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