חדש! Elementor
Experts Network — מצאו שותפים לדרך, קדמו והגדילו את העסק שלכם
חדש! Elementor
Experts Network — מצאו שותפים לדרך, קדמו והגדילו את העסק שלכם
בזמן האחרון, כמעט בכל שיחה שקשורה לעיצוב ובניית אתרים ואפליקציות, נשפכות המון מחמאות על תוכנת אנימציה חדשה: לוטי (Lottie).
המון מעצבים ובוני אתרים בעולם כבר מתלהבים ממנה, אבל עדיין לא כולם מכירים אותה. בתור מי שתמיד משתדלת להיות מעודכנת (עד כמה שאפשר) בכל התוכנות והאפליקציות החדשות, יצאתי לחקור על מה כל המהומה.
לוטי היא ספריית קוד פתוח ליצירת אנימציות שמתאימה לכל הפלטפורמות: ווב, אנדרואיד, iOS או ווינדוס. האנימציות של לוטי מיוצאות מאפטר אפקטס לקובץ JSON, על ידי התוסף Bodymovin או תוסף של לוטי.
כאן מגיע הקטע המיוחד שהוא אחת הסיבות לפופולריות של לוטי: היא מרנדרת את האנימציה בלייב(!!). בווב או באפליקציות מובייל.
בפברואר 2015, הרנן טוריסי הוציא תוסף לאפטר אפקטס בשם Bodymovin, המייצא קבצי אפטר אפקטס ב-JSON. התוסף כולל בתוך הקבצים Javascript web player, כך שאפשר לרנדר את האנימציות בווב.
שנתיים לאחר מכן, המהנדסים של חברת Airbnb התלהבו מהתוסף שיצר טוריסי והחליטו לפתח אותו לשיטת אנימציה חדשה. כך החל המסע פורץ הדרך של אנימציית לוטי.
ואגב, הספרייה נקראת על שם במאית קולנוע שהייתה חלוצה ביצירה של אנימציית צלליות, לוטי ריינג׳ר (מוזמנים להציץ בסרטון יוטיוב עליה).
כדי להבין את האטרקטיביות והשימושיות של לוטי, צריך קודם כל להכיר את האלטרנטיבות הקיימות ואת המגבלות שלהן. אז הנה סקירה קצרצרה של שיטות האנימציה הוותיקות יותר:
זהו תהליך מעט מורכב, אבל אל דאגה: ניקח אתכם צעד צעד בדרך לאנימציות מדהימות לאתר שלכם. בהמשך הכתבה, יש גם סרטונים עם הסברים מפורטים.
אז ככה, בכדי ליצור אנימציית לוטי נצטרך תחילה להוסיף את הפלאגין Bodymovin או Lottie לתוכנת אפטר אפקטס. לאחר מכן, אנחנו יכולים לבחור באחת משתי דרכים:
איך מייבאים קבצים לתוך אפטר אפקטס? הנה הסבר קצר:
*ישנה אופציה נוספת המאפשרת לדלג על שלושת השלבים הללו, בעזרת התוסף AEUX. זהו תוסף שמייצא מפיגמה וסקאץ׳ את הקבצים המתאימים לאפטר אפקטס.
עכשיו אתם מוכנים לעבור לשלב הבא, בתוך אפטר אפקטס:
*שימו לב, לוטי אינה תומכת ב-expressions, blending modes, luma mattes, layer styles – או כמעט בכל אפקט מהתפריט של אפטר אפקטס.
הכנו עבורכם גם שני סרטונים קצרים שמציגים את התהליכים שתיארנו כאן, למי שמעדיף את ההסברים שלו בווידאו:
וקבלו גם סרטון בונוס שמסביר כיצד להוסיף את האנימציות לאתר שלנו באמצעות האדיטור של אלמנטור:
יש:) אם לא בא לכם להתחיל לבנות מאפס, או אם אתם לא אנימטורים אבל ממש רוצים להוסיף אנימציות לוטי לאתר או לאפליקציה שלכם, תמיד תוכלו להוריד או לקנות קבצים מוכנים.
לוטי היא ספרייה של קוד פתוח, ולכן ישנם לא מעט מקומות שמציעים אנימציות מוצלחות ומוכנות להורדה ושימוש. הנה כמה המלצות:
Lottie files
האתר הרשמי של לוטי, שבו תוכלו למצוא חבילות שלמות של אנימציות שנוצרו על ידי טובי האנימטורים. המבחר מתעדכן כל הזמן.
Motion Elements
אתר עם קטגוריות שונות של אנימציות להורדה בתשלום.
useAnimations
אתר עם אנימציות לאייקונים להורדה חינמית.
אין ספק שהצוות של Airbnb סלל דרך חדשה בעולם האנימציה הדיגיטלית. הספרייה אמנם לא מושלמת ויש עוד כמה מגבלות שצריך להתייחס אליהן בזמן הבנייה – אך עם הקצב שבו המערכת של לוטי מתפתחת, אפשר לצפות שגם המגבלות המעטות הללו יוסרו ממש בקרוב, ככל שעוד ועוד משתמשים יצטרפו לחגיגה.
בינתיים, אם אתם ממש רוצים להתחיל ליצור אבל לא כל כך יודעים מאיפה להתחיל, תמיד תוכלו לפנות לעמוד של דריבל שיעניק לכם קצת השראה, וכמובן להציץ בוובינר שעשינו עם רונן האפטריסט המוכשר שלנו שהסביר לנו צעד אחר צעד כיצד בונים אנימציית לוטי בלייב.
מובילת הצמיחה של אלמנטור בישראל, מעצבת, FOODIE ומעריצה של סטפן סגמייסטר
