אנימה. ספריית אנימציה קל

אינטרנט אנימציה יש כברת דרך ארוכה. לא רק מפתחים יכולים לעשות כל אנימציה באמצעות משולבת של CSS / SVG / JS, אבל יש עשרות ספריות חופשיות כדי לחסוך זמן בתהליך.

אחד המועדפים שלי הוא אנימה, קוד פתוח לחלוטין ספריית אנימציה של.

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

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

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

למשך דוגמה חיה, בדוק את העט Codepen למטה. הקוד הוא פשוט מאוד אבל אתה מקבל אנימציה believable עם סקווש & למתוח ועוד ציפייה, שני יסודות של אנימציה.

אזהרה הוגנת: ספריית אנימה צפוף. זה לא כל כך קשה ליצור אנימציה מותאמת אישית אבל אתה צריך להבין כמה יסודות כמו הקלות ותחביר JavaScript נפוץ עבור callbacks & אפשרויות.

אבל כל המידע הדרוש לך הוא על דף ריפו, כולל הרבה דוגמאות קוד ו טבלאות תיעוד מפורטות. ואתה יכול לדפדף דוחות באגים פתוח או לבדוק את התמיכה בדפדפן אשר כולל כעת כל הדפדפנים העיקריים ו- IE 10+.

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

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