חדש! 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 ומעריצה של סטפן סגמייסטר
7 Responses
האם יש אפשרות ליצא אנימציה וקטורית באנימייט לאפטר ובאפטר לסגור אותה ללוטי?
תודה!
מכיוון שאפשר לייבא לאפטר רק flv מaminate למיטב ידעתי, ולוטי יודע לסגור רק shape layers אז אני מניח שלא.
אתודה!
פשר גם ליבא לאפטר מאנימייט קובץ בשם swf, שהוא קובץ וקטורי טהור
אפשר גם ליצא מאנימייט ל svg sequence
אולי זה יאפשר לה ליצא ללוטי?
תכלס המעלה הגדולה של אנימייט זה הוקטוריות שלה וההתאמה שלה לקודים…
אני עובדת כבר שנים עם אנימייט בעיקר לאנימציות ברשת ואשמח מאוד לקבל פתרונות כדי להצליח לייצר לוטי עבור הלקוחות שהולכים לדרוש את זה בגדול, כי זה ממש מדהים היכולות של לוטי.
תודה רבה!
אמנם swf יכול להכנס לאפטר אבל מכיוון שזה לא מכיל shape layers של אפטר אז לוטי לא ידע לקרוא את זה.
אי אפשר לייבא קובץ svg לאפטר. אבל אם תוכלי להמיר את הקבצים האלה מראש לAi / eps תוכלי להכניס אותם לאפטר ואזזזזזז להפוך אותם לshape layers ורק אזזזזז לוטי ידע לקרוא אותם.
כמובן שגם אז זה תלוי בקובץ של הראשון. כי לא תמיד מה שמומר באפטר לshape Layer מתקבל יפה.
(נגיד גרדיינט, אפקטים של צל וכו'…)
ממש תודה על התגובה, הבנתי
לפי מה שנראה מההדרכה הרי שלוטי עובדת רק עם אנימציה פריים בי פריים
או שאפשר ליצור אנימציה ע"י קיפריימים בטרנספורם באפטר?
אחת הדוגמאות בהדרכה הייתה אנימציית שהובאה Frame by frame באמת.
אבל כמו בשאר הדוגמאות ניתן לייצא מהאפטר גם אנימציות שנעשו עם הקיפריימים בתוך האפטר.