אנימציה במוצרי דיגיטל
אנימציה במוצר דיגיטלי היא אחת התכונות החשובות ביותר בחווית משתמש, וכשמשתמשים בה נכון היא עושה את ההבדל בין מוצרים טובים למעולים. אנחנו חיים בעידן של עודף גירויים וחוסר קשב, ואנימציה עוזרת לנו ללכוד את תשומת הלב של הגולש, לכוון אותו למקומות החשובים באתר ולהעשיר את החוויה. ישנם מאמרים ומחקרים רבים שמדגימים איך אנימציה (בין היתר) משפיעה על התנהגות הגולש, בין אם זה בהגברת הנעה לפעולה, תפיסת המותג שלכם, תפיסת תשומת הלב, יצירת חיבור רגשי ועוד.
שימוש באנימציות כאלה באתרים שלכם יוביל אתכם ליצירת מוצרים טובים יותר, מהירים יותר ואפקטיביים יותר, בעיקר כשבונים אתרים עם וורדפרס ואלמנטור, כל דבר שפורץ את התבניות ונותן לכם אפשרויות עיצוב רחבות הוא מבורך.
מה זה לוטי?
לוטי (Lottie) פותחה ע”י Airbnb והיא בפשטות – ספריית קוד שעוזרת לייצא אנימציות מתוכנת After Effects לקוד. הספרייה שיצרו החבר’ה ב-Airbnb היא קוד פתוח, מה שאומר שהיא זמינה לכולם לשימוש חופשי. לוטי מאפשרת לנו להעלות אנימציות מורכבות באיכות גבוהה ובמשקלים נמוכים מכל אופציה אחרת שקיימת היום והיא תומכת בפלטפורמות שונות כמו ios, android ועוד.
After Effects היא תוכנה לעריכת אפקטים בוידיאו אך עם השנים התפתחה גם לתוכנת אנימציה. הבעיה היא שכתוכנה לעריכת וידיאו היה ניתן לייצא ממנה רק קבצי וידיאו כבדים שאינם מתאימים לאתרים.
המקור ללוטי התחיל מתוסף חינמי ל-After Effects בשם Bodymovin שבאמצעותו מייצאים את האנימציה לקוד. לתוסף יש ממשק פשוט ונוח והוא עושה עבודה מעולה.
ולמעריצי Adobe Animate (לשעבר Adobe Flash) אני עוקב אחרי ה-GITHUB הרשמי ויש כבר פלאגין תואם בעבודה שישוחרר בתקווה בחודשים הקרובים.
למה לוטי?
כאן אמנה את הסיבות למה לדעתי לוטי היא לא פחות ממהפכה בעיצוב אתרים בכל מה שקשור לאנימציות וספציפית לעיצוב אתרים עם אלמנטור, ויש הרבה:
1. קבצים במשקל נמוך
הדבר הראשון שמדאיג אותנו באנימציות (ובצדק) הוא השפעה שלילית על ביצועי האתר. לביצועים יש השפעה ענקית על חווית משתמש וברוב המקרים הצורך בטעינה מהירה עולה על הצורך באנימציות באתר. לוטי פותרת לנו את הבעיה הזו בצורה מדהימה. בניגוד לסוגי קבצים אחרים כמו GIF, PNG, MP4, בלוטי האנימציה מורכבת מקוד ולא מפיקסלים. מה שאומר שהיא קלה יותר, מהירה יותר ויש בה יותר אופציה לאינטרקטיביות. הנה טסט קצר שמוכיח את הנקודה:
קןבץ GIF
112KB
ללא שליטה על מהירות
ללא אינטרקציה
איכות נמוכה
קובץ MP4
33KB
ללא שליטה על מהירות
ללא אינטרקציה
איכות גבוהה
קובץ לוטי
9KB
שליטה על מהירות
אינטרקציות מורכבות
איכות גבוהה
2. קובץ נטול-רזולוציה
עניין הפיקסל מול קוד משפיע לא רק על גודל הקובץ אלא גם על הגמישות שלו. אם לדוגמה ייצאתם אנימציה בקובץ GIF בגודל 200X200, ברגע שתגדילו אותה היא תאבד מהאיכות, או שתצטרכו לייצא ולהעלות אותה מחדש לאתר.
מכיוון שלוטי הוא קובץ מבוסס וקטור ואינו עשוי מפיקסלים, אפשר להגדיל את אותו הקובץ לכל גודל שתרצו מבלי לאבד מהאיכות. בדוגמה למטה: אותו הקובץ בדיוק, בגדלים שונים.
אותו הקובץ
20% רוחב
אותו הקובץ
50% רוחב
אותו הקובץ
100% רוחב
3. אינטרקטיביות
עוד יתרון לכך שהאנימציה עשויה מקוד ולא מפיקסלים היא שאפשר לעשות בה שינויים בזמן אמת מבלי לערוך את הקובץ בכל פעם מחדש. השינויים האלה נעשים בדרך כלל בקוד, אבל באמצעות התוסף הרשמי של אלמנטור תוכלו להאט ולהאיץ את האנימציה, לשלב אותה בגלילת עכבר ועוד וכל זאת בכמה קליקים פשוטים.
אנימציה מופעלת
בהקלקה
אנימציה מופעלת
במעבר עכבר
אנימציה מופעלת
בגלילת עמוד
4. כל הטוב הזה – בלי קוד
הדרך היחידה להשיג אנימציות ברמה כזו היתה ליצור אותם ידנית בקוד ע”י מתכנת. לוטי עזרה ליוצרים לבנות אנימציות ווב מעולות בלי לדעת שורה של קוד וזה מסתנכרן באופן מושלם עם מה שאלמנטור עושים. לכן השילוב הזה בין אלמנטור ללוטי הוא שילוב מעולה ומי שילמד להשתמש בו לטובתו יוכל לתת ללקוחות שלו מוצרים טובים בכמה רמות מכל השאר.
איפה משיגים קבצי לוטי?
ספרייה חינמית של קבצי לוטי בקטגוריות שונות. יש באתר קהילה גדולה של מעצבים ואנימטורים שמשתפים את הקבצים שלהם לשימוש חופשי. ניתן להוריד את הקבצים ולהעלות אותם בקלות לאתר שלכם. ממש כמו להעלות תמונה רגילה.
1. נכנסים ל-lottiefiles.com ונרשמים לאתר (חובה להירשם לאתר כדי להוריד קבצים)
2. אפשר לחפש קבצים דרך שורת החיפוש או לצפות באפשרויות דרך תפריט ANIMATIONS
3. לחיצה על אנימציה תוביל לתצוגה מקדימה, שבראשה תמצאו כפתור DOWNLOAD מתוכו יש לבחור ב-Lottie JSON.
4. את הקובץ שהורדתם מעלים לתוסף אלמנטור של לוטי (מדריך בהמשך). אפשר גם לשים לינק במקום להוריד את הקובץ אבל שיטה זו לא מומלצת מכיוון שאם האנימציה תיעלם מאתר ה-Lottiefiles, היא תיעלם גם מהאתר שלכם.
מייצרים לבד!
אם יש לכם קצת ניסיון בתוכנות של Adobe, זה פחות מסובך ממה שאתם חושבים. לא צריכים להיות אנימטורים ומומחים ל-After Effects בשביל ליצור כמה אנימציות פשוטות ומעניינות. צריך ידע בסיסי בעבודה עם Illustartor ו- After Effects. כמובן שתמיד אפשר למצוא איש מקצוע ולתת לו לעשות את מה שהוא טוב בו, ואתם תוכלו להתמקד באתר עצמו.
נמאס לכם לשבור את הראש עם מדריכים ברשת?
בואו ללמוד בניית אתרים בוורדפרס עם אלמנטור בשיעורים פרטיים אונליין, עם תוכנית לימודים אישית שמותאמת לצרכים שלכם.
איך משתמשים בקובץ לוטי באלמנטור
ועכשיו לדובדבן שבקצפת.
עד עכשיו היו מספר תוספים חיצוניים ללוטי באלמנטור שעשו עבודה סבירה עד בינונית. התוסף הרשמי של אלמנטור מלא בפיצ’רים שימושיים שיעזרו לכם לקחת את האנימציה וליצור איתה אינטרקציות שונות באתר בכמה קליקים בודדים.
1. זורקים את ווידג’ט לוטי לעמוד האלמנטור שלכם
2. בלשונית תוכן > לוטי > מקור בחרו ב’קובץ מדיה’ והעלו את קובץ הלוטי שלכם (כמו העלאת תמונה רגילה).
אפשרויות הווידג’ט השונות (לא אתעכב על הדברים הברורים)
לשונית תוכן:
לוטי
מקור: מאיפה נטען קובץ הלוטי שלכם, כתובת URL חיצונית או קובץ מדיה
- אם בחרתם בכתובת URL, הדביקו אותה במקום המיועד
- אם בחרתם קובץ מדיה, העלו אותו לאתר (אם תצוץ לכם הודעה על אישור העלאת קבצים לא מסוננים, אשרו אותה)
קישור: אפשר להוסיף קישור בלחיצה על האנימציה. טוב יותר כשהווידג’ט משמש כאייקון או ככפתור, אבל לא כאלמנט עיצובי גדול.
הגדרות
טריגר: מה בעצם מפעיל את האנימציה. זה יכול להיות מהרגע שהאנימציה נכנסת לשטח התצוגה, בקליק, במעבר עכבר, או גלילה באתר. זה מאוד תלוי איזה אפקט אתם רוצים להשיג בעזרת האנימציה. ברוב המקרים תרצו לבחור בשטח התצוגה, כך שהאנימציה תתחיל לפעול ברגע שהיא נכנסת לשטח הצפייה של הגולש בדפדפן, בו תוכלו לשלוט דרך ה-Viewport בעזרת סרגל האחוזים.
נגן בלולאה: הפעילו כדי שהאנימציה תחזור על עצמה, כבו כדי שתנגן רק פעם אחת.
לשונית סגנון:
הגדרות הסגנון הן די בסיסיות. אפשר לקבוע את רוחב הווידג’ט בדומה לווידג’ט תמונה, ולהוסיף שקיפות ופילטרים במעבר עכבר.
ניתן לשלב את הווידג’ט עם אפשרויות ה-Motion Effects של אלמנטור (בלשונית מתקדם) וליצור אנימציות מורכבות יותר! (נכון לכתיבת שורות אלה יש באג שלא מאפשר שילוב, מקווה שייפתר בעדכונים הבאים)
לסיכום
לדעתי לוטי הוא יותר מעוד פיצ’ר מגניב לאלמנטור. מדובר במהפכה של ממש. עם קצת יצירתיות יש אין-ספור דרכים ליצור אתרים מורכבים, מעניינים ומעוררי אינטרקציה יותר מבעבר, בקלות ומבלי לפגוע בזמני טעינת האתר ובחווית המשתמש.
בעיקר עם השינויים האחרונים באלגוריתם של גוגל והחשיבות של רספונסיביות והנראות של האתר שלכם במובייל, עם לוטי תוכלו ליצור קבצי אנימציה מורכבים במשקל נוצה ובאיכות מעולה – לא משנה מה גודל המסך.
הסתייגות קטנה: לוטי לא תלמד אתכם אנימציה. לכן אם תרצו להשתמש בחומרים מקוריים משלכם ולא להסתמך רק על עיצובים חינמיים ברשת, כדאי לחפש כמה מדריכים על חוקים בסיסיים באנימציה ואיך ליצור אותם ב-After Effects.
במידה ויש לכם תקציב, תזכרו שיש המון אנשים מוכשרים בחוץ, מאיירים ואנימטורים שעובדים ב-After Effects כבר שנים, ועם קצת הנחייה הם יוכלו ליצור לכם אלמנטים לאתר שיהפכו אותו ממוצר בסיסי למוצר ששווה הרבה יותר – גם לכם וגם ללקוחות שלכם.
אז גם אם אתם לא יודעים לעשות הכל בעצמכם, כדאי לשקול לשלב אנשי מקצוע אחרים כדי שתוכלו ליצור אתרים בתקציבים גבוהים יותר, זה מצב שבו כולם מרוויחים.
בכל מקרה, לוטי הוא העתיד של אנימציות באינטרנט, והעתיד הזה כבר כאן. אז תפסיקו לקרוא ורוצו ליצור דברים מדהימים!
