10+ ספריות אנימציה JavaScript הטובות ביותר לשימוש בשנת 2020

ספריות האנימציה הטובות ביותר של JavaScript


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

ראשית, קצת על הנפשות JavaScript

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

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

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

ספריות האנימציה JavaScript הטובות ביותר

להלן רשימה של ספריות אנימציית JavaScript בהן תוכלו להשתמש בכדי להוסיף כמה אנימציות למראה מדהים לאתר שלכם:

1. Anime.js

ספריות אנימציית JavaScript: Anime.js

נתחיל את הרשימה הזו של ספריות אנימציית JavaScript עם Anime.js. ספריית האנימציה הקלה הזו שעולה כ- 35K + כוכבים GitHub. בעבודה מממשק API חזק אחד, תוכלו להשתמש בו לצורך הנפשת תכונות HTML, CSS, JS, SVG ו- DOM. עם מערכת מובנית מדהימה, היא יכולה לגרום ליצירת אדוות, תנועות כיווניות, מעקב ואפקטים חופפים להיראות פשוטים. מערכת זו ניתנת לשימוש גם בתזמונים וגם בתכונות.

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

2. Velocity.js

Velocit.js

Velocity.js משלב את מיטב המעברים של jQuery ו- CSS. זה מחליף קרוב ל 17K כוכבים ב GitHub ומתגאה במשתמשים בולטים כמו WhatsApp ו- Mailchimp. לופינג, היפוך, עיכוב, הסתרה / הצגת אלמנטים, מתמטיקה במאפיינים (+, -, *, /) ותאוצה לחומרה, כולם מהווים חלק מהתכונות.

אתה יכול להשתמש ב- Velocity.js כדי לגלול חלונות דפדפן. זה יכול לעבוד גם עם jQuery שנטען בדפדפן שלך ולא תלוי בו, ואפילו לבטל אנימציות קודמות.

3. Popmotion

Popmotion

קרוב ל 18K כוכבים, Popmotion היא ספריית אנימציה פונקציונלית לכל סביבת JavaScript. זה יכול לעבוד עם כמעט כל API שמקבל מספרים ככניסות כמו React, Three.js, A-Frame ו- PixiJS.

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

4. Three.js

ספריות אנימציית JavaScript: Three.js

Three.js נמצא בראש רשימת ספריות אנימציית JavaScript עם 60K + כוכבים ב- GitHub. זה תלוי WebGL ליצור ולעבד אנימציות תלת מימד בדפדפן.

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

5. GreenSock JS

GreenSock

ה- GSAP של GreenSock עובד עם קבוצה של קבצי JavaScript קטנים הגורמים לאנימציות להראות נהדר בכל הדפדפנים הגדולים. זה משרשר בצורה חלקה מאפייני הנפשה ומבטל באגי דפדפן.

פעולות GSAP כוללות יצירת אנימציות על קנבס והנפשת כל אובייקט בסצנה. כמו כן, חושף בהדרגה, מורפיף או מעביר כל חפץ לאורך נתיב. למטרה זו זה עובד עם חבורה של יישומי תוכנה כמו SVGPlugins, PixiPlugin, WebGL, Adobe Animate ו- EaseJS. המבנה המודולרי שלה עוזר לך לבחור רק את הפונקציות הדרושות לך. עם 8 מיליון משתמשים וכוכבי 10K + GitHub, בספרייה החזקה הזו הרבה הולך על זה.

6. אני

אני

מבין ספריות JavaScript ברשימה זו, AniJS הוא מעט ייחודי. זה מאפשר לך להוסיף אנימציות לאלמנטים במבנה פשוט ‘דמוי משפט’, נהדר עבור אנשים חדשים בתחום האנימציה. מה שכן, אופיו הלא ספציפי מאפשר כמעט לכל אחד להשתמש בו בתכנון UX שגרתי.

על GitHub, AniJS מדרג יותר מ- 3.5K כוכבים. הוא אינו סומך על ספריה כלשהי של צד שלישי ובאופן כללי עוזר להאיץ את הפיתוח. זה עובד באותה מידה גם על אנדרואיד ו- iOS, וגם בכל הדפדפנים הפופולריים.

ז. Mo.js

Mo.js

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

ממשקי ה- API נראים פשוטים, אבל אתה יכול לעשות הרבה איתם. בתוך ערכת הכלים תמצאו עורך עקומות ועורך ציר זמן שיעזרו לכם לבנות את האנימציות שלכם, כמו גם נגן לשליטה על האנימציות שלכם. ישנם מודולים שונים לסטייה, הקלה, ציר זמן ועוד. כל זה מרוויח Mo.js קרוב ל -16K כוכבים ב GitHub.

8. Vivus.js

ספריות אנימציה של JavaScript: Vivus

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

אתה יכול לבחור כל אחת מהאנימציות הזמינות – Delayed, Sync או OneByOne. אחרת, אתה יכול גם ליצור סקריפט מותאם אישית לצייר SVG שלך. לקבלת גמישות רבה יותר, אתה יכול לדרוס את ההנפשה של כל נתיב באמצעות פונקציית JavaScript פשוטה. יותר מ- 13K משתמשים נותנים אגודל לספריה זו ב GitHub.

9. ScrollReveal JS

ScrollReveal

אם תרצה להנפיש את רכיבי האינטרנט שלך בזמן שהם גולשים לתצוגה, ScrollReveal לא יאכזב. בספריית האנימציה הקלה ללמידה זו יש אפס תלות וכוכבים של 18.5K + GitHub.

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

10. Typed.js

Typed.js

Typed.js היא ספרייה פשוטה (יותר תוסף, באמת) כדי להקל על ההקלדה על המסך. ברגע שתזין מחרוזת כלשהי, מבקר יכול לצפות בהקלדתו במהירות שנקבעה. לא רק זה, אתה יכול לעבוד על כפתור המרחב האחורי, כמו גם להתחיל משפט חדש. אם ברצונך לאפשר למבקרים עם JS מושבתת לצפות בה גם אתה פשוט צריך למקם חלוקת HTML בדף. ככה, בוטים ומנועי חיפוש זוכים גם לצפות במילים שהוקלדו.

ספריה זו דורגת 9.5 קילוגרם + כוכבים ב- GitHub. משתמשי כוח כוללים את Slack ו- Envato.

11. לוטי מאת AirBnB

ספריות אנימציה של JavaScript: לוטי

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

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map